我正在建立一个多语言网站,网站的所有者帮我做一些翻译。一些显示的短语需要换行来保持网站的风格。

不幸的是,所有者不是计算机人员,所以如果他看到foo<br />bar,他就有可能在翻译时以某种方式修改数据。

有没有CSS解决方案(除了改变宽度)应用到一个元素,这将打破每一个字?

(我知道我可以在PHP中做到这一点,但我想知道在CSS中是否有一个我不知道的漂亮的技巧来完成同样的事情,也许在CJK特性中。)

EDIT

我将尝试用图表说明发生了什么:

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

长字会自动断掉,短字不会。我想让它看起来像这样:

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

当前回答

就我而言,

    word-break: break-all;

工作得很好,希望对其他像我一样的新人有所帮助。

其他回答

你不能针对CSS中的每个单词。但是,使用一点jQuery就可以做到。

使用jQuery,您可以将每个单词包装在<span>中,然后CSS设置span为display:块,这将把它放在自己的行上。

理论上当然是P

如果你想从不同的解决方案中进行选择,除了给出的答案之外……

另一种方法是将容器宽度设置为0,并确保溢出是可见的。然后每一个字就会从里面溢出来,成为自己的一行。

div { 宽度:0; 溢出:可见; } < div >短字< / div > <人力资源> < div >庞大的词< / div >

或者您可以使用这些新提出的宽度值之一,前提是在您阅读本文时这些值仍然存在。

div { 宽度:min-intrinsic;/*旧Chrome, Safari */ 宽度:-webkit-min-content;/*少旧Chrome, Safari */ 宽度:-moz-min-content;/*当前Firefox */ 宽度:min-content;/*当前Chrome, Safari;而不是IE或Edge */ } < div >短字< / div > <人力资源> < div >庞大的词< / div >

https://jsfiddle.net/bm3Lfcod/1/

对于那些寻求在一个灵活的父容器中工作的解决方案,并且在两个维度上都是灵活的子容器。如。导航按钮。

//the parent (example of what it may be)
div {
  display:flex;
  width: 100%;
}

//The children
a {
  display: inline-block;
}

//text wrapper
span {
  display: table-caption;
}

就我而言,

    word-break: break-all;

工作得很好,希望对其他像我一样的新人有所帮助。

<span>是一个内联元素,我添加了一个display: inline-block来给元素max-width: min-content;, min-content是文本/句子中最小单词的值/宽度。

如果使用min-content,“width”将是最长的单词。在这种情况下,例子是你的长单词。但如果你有不同的单词,比如and if或一些2/3字符的单词,那么这些单词将适合在同一行。

如果你想保持文字的行为,你可以给一个固定的宽度,例如5px。

在CodePen中查看更多示例。

.wrapWord { 显示:inline-block; max-width: min-content; } < div > < span class = " wrapWord”> 例词 < / span > < / div >