有沒有可能用CSS把句子分隔成每行一個單詞？

輸入:

<div>Hello world foo bar</div>

渲染輸出:

Hello
world
foo
bar

不希望將寬度設(shè)置為例如1px。

你必須使用display:table-caption；為了實(shí)現(xiàn)這一點(diǎn)。

以下是解決方案。

工作演示

HTML:

<div>Hello world foo bar</div>

CSS:

div{display:table-caption;}

希望這有所幫助。

Nathan使用表格標(biāo)題的回答幾乎是正確的，但忽略了一個關(guān)鍵問題，即句子實(shí)際上只被最長的單詞分開，導(dǎo)致較短單詞的分組。

例如下面這句話:

這個技巧根據(jù)最長的單詞對句子中的單詞進(jìn)行分組和拆分。

實(shí)際上會產(chǎn)生以下輸出。請注意中的分組和輸出中的分組。

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

實(shí)際上，你可以通過設(shè)置單詞間距非常容易地做到這一點(diǎn)，它有很好的支持。

使用它，您可以正確地輸出如下句子:

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

這里有一個可以運(yùn)行的代碼示例。

小片

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>

您可以將div的寬度設(shè)置為1px，這將把每個單詞放在新的一行上

div {
    width:1px;
}

http://jsfiddle.net/KjX4N/