前端 CSS 问题：如何让 DIV 仅显示一行内容？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2887 天前的主题，其中的信息可能已经有所发展或是发生改变。

DEMO： https://jsfiddle.net/86fhqvLg/

.col 中因包含一个 100%的自缩放图片，所以高度是不固定的
目前 CSS 设置中，在窗口宽度<600px 的时候会变为两排内容
需求是在窗口宽度<600px 的时候，只显示首行内容，第二行内容隐藏

搜索了很久，始终无法找到实现的方法，求教各位，谢谢！

CSS

自缩放

宽度

内容

9 条回复 • 2016-12-31 10:26:04 +08:00

rrkelee

2016-12-31 08:10:32 +08:00

https://jsfiddle.net/fks5nrg2/

gdtv

2016-12-31 08:11:51 +08:00

同一楼，稍稍改一下：

@media screen and (max-width: 600px) {
.col{
width:45%;
white-space:nowrap;
}
.container .col{
display:none;
}
.container .col:nth-child(1),.container .col:nth-child(2){
display:block;
}
}

nikoo

2016-12-31 08:19:16 +08:00

@rrkelee 谢谢，但实际环境中 col 并不只是三个，所以仅隐藏一个 last-child 无法实现需求

nikoo

2016-12-31 08:24:40 +08:00

@gdtv 谢谢，隐藏掉全部 col 然后显示出指定个数，这个方式的确可行！但是感觉不太优雅。。

gdtv

2016-12-31 08:29:28 +08:00

@nikoo

再改改：

@media screen and (max-width: 600px) {
.col{
width:45%;
white-space:nowrap;
}
.col:nth-child(n+3){
display:none;
}
}

gdtv

2016-12-31 08:33:44 +08:00

楼主的题目指明了图片宽度和浏览器窗口宽度, 可以用 nth-child 实现, 请问一下假如题目改为这样，怎么实现呢:

父元素里包含 N 个图片子元素, 图片的高度和宽度,以及屏幕宽度都不确定. 如何保证在任何图片尺寸和屏幕尺寸的情况下都只显示一行图片？

nikoo

2016-12-31 08:39:17 +08:00

@gdtv 谢谢，在实际的生产环境中，页面针对不同终端有多个 CSS 设置：
@media screen and (max-width: 300px) {
@media screen and (max-width: 600px) {
@media screen and (max-width: 900px) {
...

所以如果用 nth-child 的方法，去计算每个屏幕宽度下应有多少个 col 然后去写死在 CSS 中，感觉有点不太合适。。。

gdtv

2016-12-31 08:41:32 +08:00

@nikoo 你 7 楼说得对，所以我就出了 6 楼那个问题

learnshare

2016-12-31 10:26:04 +08:00

https://www.google.com/#newwindow=1&q=css%20single%20line%20text