Question

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

输入：

<div>Hello world foo bar</div>

渲染输出：

Hello
world
foo
bar

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

Answer 1

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

这是解决方案。

<强> WORKING DEMO

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 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}}

Answer 3

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

div {
    width:1px;
}

http://jsfiddle.net/KjX4N/

将句子分成每行一个单词

3 个答案: