html - 检测一个 div 是否有多行

Question

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

div :multiline {
   ...
}

我想根据行数(1 或更多)格式化内容

Answer 1

我不会将其称为解决方案，而是可能会导致解决方案的东西。我觉得你的问题很有趣；所以我决定尝试一下 CSS。

This is what I came up with.

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

如果单行内容没有接近容器的整个宽度，效果最佳。

快速笔记:

1. 我注意到一些失败案例是由于单行内容接近容器的整个宽度。 (导致错误视觉效果的全 Angular 距离因浏览器而异，已在 Chrome 33、Firefox 25 和 Internet Explorer 11 中测试)
2. 它使用 calc() ( list of support )
3. 它使用:before伪类(list of support)
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;
}