Html 检测div是否有多行

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

div :multiline {
   ...
}

---

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

如果您愿意使用Javascript/JQuery，您可以检查div的高度，看看它是否大于仅使用一行文本时的高度。当然，这不是很容易出错，但我不知道另一种方法。

我不确定您是否能够使用CSS管理这一点，但您应该能够使用JQuery。我必须承认，我的JQuery不是很好，我正在学习它，所以一定要谨慎对待。可以使用特性的高度来查找div的高度，并根据div的高度添加必要的样式

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

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

---

与其说这是一个解决方案，不如说这是一个可能导致解决方案的东西。我觉得你的问题很有趣；所以我决定玩一下CSS

它使用内部

span

的当前宽度（通过

内联块

显示给出）来确定缩进宽度。我们使用

calc（）

使缩进

100%

减去添加了最终缩进的

200px

的父宽度（

30px

）

如果单行内容不接近容器的全宽，则效果最佳

简要说明：

我注意到一些失败案例是由于单行内容接近容器的全宽。（在Chrome 33、Firefox 25和Internet Explorer 11中测试，不同浏览器与导致错误视觉效果的全宽的距离不同）

它使用

calc（）

（）

它使用

：在

伪类（）之前

它需要使用内部

内联块
元素来跟踪内容宽度

它要求父元素具有已知的宽度

这只包括缩进，这是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>

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

---

@基斯科帕尼不是我见过的，我也不这么认为。搜索了一下，没有发现JS-less.CSS有伪元素

：：first-line

，但这是CSS中唯一可用的基于行的选择器，它没有创建条件检查或样式的真正能力。你想如何格式化内容？这个div将是一个“警报”div，如果它只有一行，我想做

左填充：0px

，否则

左填充：5px

我认为你的演示对于OP真正想要的东西不是很直观（比如想象中的

：多行

伪类），您是否可以编辑演示，以便如果

div

仅包含一行，其背景色将为

绿色

，如果它包含多行，其背景色应为

红色

？在一般情况下，我们需要更多的样式属性，而不仅仅是背景色。不幸的是，这只适用于缩进，而缩进正是OP在其原始帖子的评论中试图实现的。它不会检测多行，而是使用内容的宽度来确定缩进宽度。我认为，一个更通用的解决方案实际上可以检测一个元素是否是多行的，它只适用于JavaScript。您可能会确定它是服务器端的，并附加一个多行类，但如果用户代理覆盖、缩小或放大字体大小，则该操作将失败。在您希望实现的情况下，我建议使用JavaScript。