检测div是否有多行

Question

如何检测div是否有多行？我的意思是这样的:

div :multiline {
   ...
}

我想格式化有关行数(1或更多)的内容

Answer 1

我不会把这个解决方案称为可能导致解决方案的东西.我觉得你的问题很有趣; 所以我决定尝试一下CSS.

这就是我提出的.

它使用内部的当前宽度span(通过inline-block显示给出)来确定缩进宽度.我们使用calc()缩进100%减去其父宽度的200px最后一个缩进添加到它(30px).

如果单行内容未接近容器的整个宽度,则效果最佳.

快速笔记:

1. 我注意到由于单行内容接近容器的整个宽度而导致的一些故障情况.(全宽度导致错误视觉效果的距离因浏览器而异,在Chrome 33,Firefox 25和Internet Explorer 11中进行了测试)
2. 它使用calc()(支持列表)
3. 它使用:before伪类(支持列表)
4. 它需要使用内部inline-block元素来跟踪内容宽度.
5. 它要求父元素具有已知宽度.
6. 这只包括缩进,这是他们在其职位评论中试图实现的OP国家.

HTML代码:

<h1>Success Cases</h1>
<p><span class="indent">Single line Single line</span></p>
<p><span class="indent">The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</span></p>
<h1>Failure Cases</h1>
<p><span class="indent">Single line Single line Single 1</span></p>
<p><span class="indent">Single line Single line Single line</span></p>

CSS代码:

p {
    background-color: #ccc;
    margin: 10px;
    width: 200px;
}

p > .indent {
    display: inline-block;
}
p > .indent:before {
    background-color: red;
    content: "";
    float: left;
    width: calc(100% - 200px + 30px);
    height: 1em;
}

Answer 2

如果您愿意使用 Javascript/JQuery，您可以检查 div 的高度，看看它是否大于仅一行文本的高度。当然，这并不是非常防错，但我不知道还有其他方法。