检测一个div是否有多行

Question

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

div :multiline {
   ...
}

我想对内容进行格式化，使其具有行数（1行或多行）

- Kiss Koppány

---

CSS有伪元素::first-line，但这是CSS中唯一可用的基于行的选择器，它没有真正的能力创建条件检查或样式。您想如何格式化内容？ - David Thomas

这个 div 是一个“警告”div，如果它只有一行，我想设置 padding-left:0px，否则设置 padding-left:5px。 - Kiss Koppány

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;
}

- jsea

---

我认为你的演示并不符合OP 真正想要的直观效果（比如虚构的:multiline伪类），你能否编辑演示，使得如果div只包含一行文本，则其背景颜色为green，如果包含多行文本（多行），则其背景颜色应为red？在一般情况下，我们需要比背景颜色更多的样式属性。 - King King

很不幸，这仅适用于缩进，这是OP在其原始帖子的评论中所述尝试实现的内容。它并不能检测多行，而是使用内容的宽度来确定缩进宽度。我认为更一般的解决方案实际上要检测元素是否为多行将只能在JavaScript中工作。您可能可以在服务器端确定它并附加一个多行类，但如果用户代理覆盖了字体大小、缩小或放大，则会失败。在您想要实现的情况下，我建议使用JavaScript。 - jsea

Answer 2

如果你愿意使用Javascript/JQuery，你可以检查div的高度是否大于只有一行文本时的高度。当然，这并不是非常可靠，但我不知道其他方法。

- EagleV_Attnam

---

@KissKoppány 我没有看到过这种情况。 - Daedalus

我也不这么认为。我再搜索了一下，没有找到不需要JS的东西。 - EagleV_Attnam

Answer 3

我不确定你能否通过CSS来实现这个，但是你应该可以通过JQuery来实现。我必须承认我的JQuery水平不是很高，我正在学习中，所以请带着一点保留地看待。你可以使用height属性来找到div的高度，并根据div的高度添加必要的样式。

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

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

- ramesh