Question

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

div :multiline {
   ...
}

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

Answer 1

我不会把这个解决方案称为可能导致解决方案的问题。我觉得你的问题很有趣;所以我决定稍微使用CSS。

This is what I came up with.

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

如果单行内容未达到容器的整个宽度，则效果最佳。

快速笔记：

我注意到由于单行内容接近容器的整个宽度而导致的一些故障情况。（全宽度导致错误视觉效果的距离因浏览器而异，在Chrome 33，Firefox 25和Internet Explorer 11中进行测试）
它使用calc()（list of support）
它使用:before伪类（list of support）
它需要使用内部inline-block元素来跟踪内容宽度。
它要求父元素具有已知宽度。
这只包括缩进，这是他们在帖子评论中试图达到的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的高度，看看它是否大于只有一行文本。当然，这不是一个非常错误的证据，但我不会知道另一种方式。

Answer 3

我不确定你是否能用CSS管理它，但你应该能够做这个JQuery。我必须承认我的JQuery并不是很好，而且我正在学习它，所以一定要把它拿出来。您可以使用属性的高度来查找div的高度，并根据div的高度添加必要的样式。

$( "div" ).ready( 
  function test(event) {
  var heightOfDiv = $( document ).height();

   if (heightOfDiv > 15){
    $("div").css({
    backgroundColor: "green"
    });} 
}
);

检测div是否有多行

3 个答案: