CSS换行:使第二行更大或指定每行的单词数量?

时间:2017-12-01 00:17:56

标签: html css

一个控制线可以用CSS包装。 例如,我想用每行包含大致相同数量的单词行。或者至少没有单字线。

原文:

Some words for a really long title that most likely will take two lines

理想情况下:

Some words for a really long title that most likely will take two lines

至少: Some words for a really long title that most likely will take two lines

CSS可以实现吗?

1 个答案:

答案 0 :(得分:0)

它绝对可以实现!只需为目标元素添加固定的 width



div {
  width: 240px;
}

<div>Some words for a really long title that most likely will take two lines</div>
&#13;
&#13;
&#13;

请注意,元素必须 block-level (默认情况下 <div> )。例如,如果您想使用 <span> 标记,则还需要应用 display: block

&#13;
&#13;
span {
  display: block;
  width: 240px;
}
&#13;
<span>Some words for a really long title that most likely will take two lines</span>
&#13;
&#13;
&#13;

显然,您需要根据要跨越多行的文本长度来找到元素的确切宽度。

您可以使用可变宽度,但这会导致分割到每一行的文本数量在各种屏幕宽度上发生变化。固定宽度可确保在所有设备的每一行上显示完全相同数量的文本。

希望这有帮助! :)