如何检测一个 div 是否有多于一行?我的意思是这样的:
div :multiline {
...
}
我想对内容进行格式化,使其具有行数(1行或多行)
span
的当前宽度(通过 inline-block
显示)来确定缩进宽度。我们使用 calc()
让缩进为父元素宽度的 100%
减去 200px
的父级宽度,再加上最终缩进的 30px
。
如果单行内容不接近容器的满宽度,则效果最佳。
快速笔记:
calc()
(支持列表):before
伪类(支持列表)inline-block
元素来跟踪内容宽度。<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;
}
:multiline
伪类),你能否编辑演示,使得如果div
只包含一行文本,则其背景颜色为green
,如果包含多行文本(多行),则其背景颜色应为red
?在一般情况下,我们需要比背景颜色更多的样式属性。 - King King如果你愿意使用Javascript/JQuery,你可以检查div的高度是否大于只有一行文本时的高度。当然,这并不是非常可靠,但我不知道其他方法。
我不确定你能否通过CSS来实现这个,但是你应该可以通过JQuery来实现。我必须承认我的JQuery水平不是很高,我正在学习中,所以请带着一点保留地看待。你可以使用height属性来找到div的高度,并根据div的高度添加必要的样式。
$( "div" ).ready(
function test(event) {
var heightOfDiv = $( document ).height();
if (heightOfDiv > 15){
$("div").css({
backgroundColor: "green"
});}
}
);
::first-line
,但这是CSS中唯一可用的基于行的选择器,它没有真正的能力创建条件检查或样式。您想如何格式化内容? - David Thomaspadding-left:0px
,否则设置padding-left:5px
。 - Kiss Koppány