【问题标题】: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 aon the 的分组。

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

您实际上可以通过设置具有excellent supportword-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 - 一切都在问题之中。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-03-13
  • 1970-01-01
  • 2018-04-15
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多