当它在一行中缩短或太长以至于包裹时，是否可以给出不同样式的文本？

Question

我想在页面中显示一些书籍的标题。有些标题很短，只能在一行中显示，有些标题很长，可以包含2行。

是否可以为2种情况设置不同的样式（例如：color或line-height），只使用CSS？

E.g。如果标题在一行中，则将颜色设置为绿色。但如果它太长或者用户将窗口调整为较小的窗口，它会以2行显示，请将颜色设置为黄色？

Answer 1

我认为这只有CSS才有可能。您需要使用JavaScript来计算一行中的字符或单词。

另一种解决方案是使用伪元素::first-line http://www.w3schools.com/cssref/sel_firstline.asp

但是这不允许更改整个段落样式，只允许第一行，而其余部分将具有主css。

Answer 2

要更改一定长度的文本字符串的颜色，我认为您必须找到jquery或javascript解决方案。

在标题之间添加空格（行高）要简单得多。如果每个标题都被包装（例如在div，h2，li，p中），你可以调整行高并为周围元素添加填充或边距。

CSS示例：

p.title { font-size: 11px; line-height: 12px; padding-bottom: 15px; }

HTML示例：

<p class="title">Title 1</p>
<p class="title">Title 2 is a longer title - on two lines</p>
<p class="title">Title 3 is short</p>

如果您需要检查字符串是否长于容器div的宽度，则有topic here