css如何換行

在css中透過word-break與white-space這兩個屬性來設定自動換行，其中word-wrap屬性允許長單字或URL位址換行到下一行；而white-space屬性可以設定文本換行方式。

本文操作環境：windows7系統、css3版、Dell G3電腦。

css如何換行？

css讓容器放不下自動換行

css可以透過word-break與white-space這兩個屬性來設定自動換行。 word-wrap屬性允許長單字或URL位址換行到下一行。 white-space屬性可以設定文字換行方式。

css讓容器放不下自動換行：

css程式碼：

<style type="text/css">
.linebr {
clear: both; /* 清除左右浮动 */
width: 100px; /* 必须定义宽度 */
border:1px solid ;/*定义容器外边框*/
word-break: break-word; /* 文本行的任意字内断开 */
word-wrap: break-word; /* IE */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre; /* CSS2 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
}
</style>

HTML程式碼：

CSS容器內容超出(溢出)自動換行,CSS容器內容超出(溢出)自動換行,CSS容器內容超出(溢出)自動換行

效果圖：

#word-break屬性：

word-wrap 屬性允許長字或URL 位址換行到下一行。

語法：

word-wrap: normal|break-word;

屬性值：

normal 只在允許的斷字點換行（瀏覽器保持預設處理）。

break-word 在長單字或 URL 位址內部進行換行。

white-space屬性

white-space 屬性設定如何處理元素內的空白。

屬性值：

normal 預設。空白會被瀏覽器忽略。

pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的

 標籤。 <p>nowrap 文字不會換行，文字會在同一行上繼續，直到遇到 <br> 標籤為止。 </p><p>pre-wrap 保留空格符序列，但正常地進行換行。 </p><p>pre-line 合併空白符號序列，但保留換行符。 </p><p>inherit 規定應該從父元素繼承 white-space 屬性的值。 </p><p>推薦學習：《<a href="https://www.php.cn/course/list/12.html" target="_blank">css影片教學</a>》</p>

以上是css如何換行的詳細內容。更多資訊請關注PHP中文網其他相關文章！