将句子分隔为每行一个单词答案

【问题标题】：Separate sentence to one word per line将句子分隔为每行一个单词
【发布时间】：2013-08-12 10:37:32
【问题描述】：

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

输入：

<div>Hello world foo bar</div>

渲染输出：

Hello
world
foo
bar

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

【问题讨论】：

只是想知道，width:0 或 1px 有什么问题 - 你为什么不想要那个？
因为文本附加了其他样式 - 例如背景。

标签： css

【解决方案1】：

您必须使用display:table-caption; 来实现此目的。

这是解决方案。

WORKING DEMO

HTML：

<div>Hello world foo bar</div>

CSS：

div{display:table-caption;}

希望这会有所帮助。

【讨论】：

不要教你父亲如何生孩子。添加问题后 15 分钟后可以接受答案。 ;-)
这实际上只根据最长单词的宽度对单词进行分组。
@JamesSouth - 你能分享一下你上面提到的东西吗？
@InternalServerError - 根据 OP 的情况，case 不是表头。另外，不知道为什么要对表头这样做。
@NathanL 我发布了一个答案，因为我想正确解释它。

【解决方案2】：

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

例如下面这句话：

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

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

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

您实际上可以通过设置具有excellent support 的word-spacing 来非常轻松地做到这一点。

使用它可以正确输出句子如下：

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>

【讨论】：

+1 为您努力进一步改进答案。我的回答是基于 OP 的场景。您提供的替代方案与我在查看 OP 的问题时所回答的内容“有点”不同。
谢谢！在尝试了您的解决方案后，我偶然发现了我的解决方案。
这就是解决方案。字间距是它所在的位置。把那个表格标题从这里拿走！

【解决方案3】：

你可以设置 div 的宽度为 1px，这会将每个单词换行

div {
    width:1px;
}

http://jsfiddle.net/KjX4N/

【讨论】：

也许你应该提出一些要求，你的问题不是很具体，我们可以添加额外的html吗？在 CSS 中无法定位单独的单词
有一个要求：没有1px 的CSS - 一切都在问题之中。