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

This topic created in 3512 days ago, the information mentioned may be changed or developed.

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

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

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

CSS

自缩放

宽度

内容

9 replies • 2016-12-31 10:26:04 +08:00

rrkelee

Dec 31, 2016

https://jsfiddle.net/fks5nrg2/

gdtv

Dec 31, 2016

同一楼，稍稍改一下：

@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

Dec 31, 2016

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

nikoo

Dec 31, 2016

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

gdtv

Dec 31, 2016

@nikoo

再改改：

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

gdtv

Dec 31, 2016

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

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

nikoo

Dec 31, 2016

@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

Dec 31, 2016

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

learnshare

Dec 31, 2016

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