css - 将句子分隔为每行一个单词

Question

是否可以使用 CSS 将句子分隔为每行一个单词？

输入：

<div>Hello world foo bar</div>

渲染输出：

Hello
world
foo
bar

例如1px，不希望将宽度设置为。

Answer 1

你必须使用display:table-caption;来实现这一点。

这是解决方案。

工作演示

的HTML：

<div>Hello world foo bar</div>

CSS：

div{display:table-caption;}

希望这可以帮助。

Answer 2

内森使用的答案table-caption几乎是正确的，但错过了一个关键问题，即句子实际上只被最长的单词分割，导致较短的单词分组。

例如下面的句子：

这个技巧根据最长的单词对句子中的单词进行分组和拆分。

实际上导致以下输出。in a注意输出上和输出中的分组on the。

This 
trick 
groups 
and 
splits 
words 
in a 
sentence 
based 
on the 
longest 
word.

word-spacing实际上，您可以通过设置which has很好的支持很容易地做到这一点。

使用它，您可以正确输出句子，如下所示：

This 
trick 
groups 
and 
splits 
words 
in 
a 
sentence 
based 
on 
the 
longest 
word.

这是您可以运行的工作代码示例。

片段

p {
  word-spacing: 9999rem;
}
p ~ p {
  /* Undo last assignment */
  word-spacing: unset;
  display: table-caption;
}

<h3>word-spacing</h3>
<p>
  This trick splits each word in a sentence
</p>
<hr/>
<h3>table-caption</h3>
<p>
  This trick groups and splits words in a sentence based on the longest word.
</p>

Answer 3

您可以将 div 的宽度设置为 1px，这会将每个单词放在一个新行上

div {
    width:1px;
}

http://jsfiddle.net/KjX4N/