CSS可以在一个元素的每个单词之后强制换行吗？ [英] Can CSS force a line break after each word in an element?

问题描述

我建立了一个多语言网站，主人帮我翻译一些翻译。一些显示的短语需要换行以维持网站的风格。

I'm building a multilingual site, with the owner helping me with some translations. Some of the displayed phrases need line breaks to maintain the style of the site.

不幸的是，所有者不是计算机家伙，所以如果他看到 foo< br /> bar 有可能他会在翻译时修改数据。

Unfortunately, the owner isn't a computer guy, so if he sees foo<br />bar there's the chance he'll modify the data somehow as he's translating.

有一个CSS解决方案（除了改变宽度）应用于一个元素， word？

Is there a CSS solution (besides changing the width) to apply to an element which would break after every word?

（我知道我可以在PHP中做到这一点，但我想知道是否有一个很好的技巧，我不知道在CSS中完成同样的事情，可能在CJK的功能。）

(I know I can do this in PHP, but I'm wondering if there's a nifty trick I don't know about in CSS to accomplish the same thing, perhaps in the CJK features.)

编辑

到图表发生了什么：

----------------          ----------------
| Short Word   |          | Gargantuan   |
|              |          | Word         |
----------------          ----------------

长字自动断开，短字不自动断开。我想要它看起来像这样：

The long word breaks automatically, the short word doesn't. I want it to look like this:

----------------          ----------------
| Short        |          | Gargantuan   |
| Word         |          | Word         |
----------------          ----------------

推荐答案

使用

.one-word-per-line {
    word-spacing: <parent-width>; 
} 

其中< parent-width> 是父元素的宽度（或任何高值，不适合一行）。这样，你可以确保在一封信之后有一个换行符。适用于Chrome / FF / Opera / IE7 +（甚至可能是IE6，因为它支持字间距）。

where <parent-width> is the width of the parent element (or an arbitrary high value that doesn't fit into one line). That way you can be sure that there is even a line-break after a single letter. Works with Chrome/FF/Opera/IE7+ (and probably even IE6 since it's supporting word-spacing as well).

这篇关于CSS可以在一个元素的每个单词之后强制换行吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！