CSS 可以在不修改寬度的情況下強制在每個單字後換行嗎？

CSS 能否在每個單字後實現換行？

在創建遵循特定樣式的多語言網站時，開發人員遇到了挑戰。協助翻譯的網站所有者缺乏技術熟練程度，可能會導致資料被修改。這引起了人們對保留對網站設計至關重要的換行符的擔憂。因此，問題出現了：CSS 是否提供了除了修改寬度以在每個單字後強制換行之外的解決方案？

解決方案

雖然 PHP 提供了一個簡單的解決方案，但查詢專注於發現潛在的 CSS 解決方法。關鍵在於控製字間距。透過利用 word-spacing 屬性並指定大於父元素寬度的值，可以在每個單字後面強制換行。

以下是實現此目的的範例 CSS 程式碼：

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

這確保瞭只要父元素的寬度足夠寬，即使是單個字母也會換行。

到進一步增強此方法，可以將以下CSS 規則應用於目標元素：

.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;
}

這些組合的CSS 屬性強制瀏覽器渲染遵循單字邊界，將文字分成單獨的行。此方法相容於主流瀏覽器，包括Chrome、Firefox、Opera、IE7。

以上是CSS 可以在不修改寬度的情況下強制在每個單字後換行嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！