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

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

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

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

EDIT

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

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

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

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

当前回答

尝试使用空白:pre-line;。它在代码中出现换行符的地方创建换行符,但忽略额外的空格(制表符和空格等)。

首先,在代码中把单词写在不同的行上:

<div>Short
Word</div>

然后将样式应用到包含单词的元素。

div { white-space: pre-line; }

但是要注意,元素内部代码中的每一个换行符都会创建一个换行符。所以写下面的句子会导致在第一个单词之前和最后一个单词之后多一个换行符:

<div>
    Short
    Word
</div>

有一篇关于CSS技巧的很棒的文章解释了其他空白属性。

其他回答

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

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

理论上当然是P

另一种解决方案在“每行一个词的句子”中描述,通过应用display:table-标题;完美到极致

我也遇到了同样的问题,但这里的选择都帮不了我。某些邮件服务不支持指定的样式。 以下是我的版本,它解决了这个问题,并且在我检查的任何地方都有效:

<table>
    <tr>
        <td width="1">Gargantuan Word</td>
    </tr>
</table>

或使用CSS:

<table>
    <tr>
        <td style="width:1px">Gargantuan Word</td>
    </tr>
</table>

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

@HursVanBloob给出的答案仅适用于固定宽度的父容器,但不适用于流体宽度的容器。

我尝试了很多属性,但没有一个像预期的那样工作。最后,我得出了一个结论,赋予字间距一个非常大的值是完美的。

p { word-spacing: 9999999px; }

或者,对于现代浏览器,您可以使用CSS vw单位(可视宽度占屏幕大小的%)。

p { word-spacing: 100vw; }