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中文網其他相關文章！