CSS可以在元素中的每个单词后强制换行吗?

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

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

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

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

EDIT

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

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

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

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

当前回答

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

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

或使用CSS:

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

2019-01-09 17:35:21

其他回答

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

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

p { word-spacing: 9999999px; }

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

p { word-spacing: 100vw; }

2014-05-27 12:15:27

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

或使用CSS:

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

2019-01-09 17:35:21

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

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

理论上当然是P

2010-11-18 08:43:43

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

2015-01-08 18:20:17

就我而言，

    word-break: break-all;

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

2020-01-28 19:17:53

CSS可以在元素中的每个单词后强制换行吗?

推荐文章

最新文章

标签