CSS 如何在多语言网站中强制每个单词后换行？

CSS 中每个单词后的换行

在多语言网站开发中，在处理不同语言时，维护文本对齐和风格元素可能会带来挑战规则。一种这样的场景涉及在特定元素中的每个单词后强制换行以确保一致性。虽然这可以使用 PHP 来完成，但需要考虑一个可选的 CSS 解决方案。

CSS 实现

要实现所需的效果，可以应用以下 CSS 代码相关元素：

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

.your-classname{
    width: min-intrinsic;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    display: table-caption;
    display: -ms-grid;
    -ms-grid-columns: min-content;
}

替换 父元素的宽度或超过单行宽度的任意高值。这可以确保每个单词都分成自己的行。

示例

考虑以下 HTML：

<p class="one-word-per-line">
    Short Word Gargantuan Word
</p>

应用 CSS 后，将显示文本如：

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

兼容性

此解决方案受 Chrome、Firefox、Opera 和 IE7 支持，确保跨浏览器的广泛兼容性。

以上是CSS 如何在多语言网站中强制每个单词后换行？的详细内容。更多信息请关注PHP中文网其他相关文章！