CSS 行元素自動換行是指在一個行內(nèi)元素內(nèi)部內(nèi)容超出了容器的寬度時,自動換行顯示。這個特性可以通過 CSS 的word-wrap
和word-break
屬性來實現(xiàn)。
/* word-wrap 屬性 */ .example1 { word-wrap: break-word; } /* 如果文字過長,將被分割成多行分別顯示 */ .example2 { word-wrap: normal; } /* 如果文字過長,出現(xiàn)在邊界的文字將會被割裂 */ .example3 { word-wrap: none; }
在代碼示例中,word-wrap: break-word;
屬性表示當(dāng)文字過長時,自動換行成多行來顯示;word-wrap: normal;
屬性表示當(dāng)文字過長時,出現(xiàn)在邊界的文字將會被割裂而不會自動換行;而word-wrap: none;
屬性表示當(dāng)文字過長時,會不考慮邊界,不會自動換行。
除了word-wrap
屬性,CSS 還提供了word-break
屬性,它可以控制單詞在換行時的規(guī)則和方式,比如劃分位置、行首對齊等等。
/* word-break 屬性 */ .example4 { word-break: break-all; } .example5 { word-break: keep-all; }
在代碼示例中,word-break: break-all;
屬性表示當(dāng)單詞過長,會在單詞中間或任意位置劃斷;word-break: keep-all;
屬性表示單詞不可換行顯示。
總之,掌握 CSS 的word-wrap
和word-break
屬性可以使開發(fā)者更好地控制文字的換行及單詞的顯示規(guī)則,提升頁面可閱讀性和美觀程度。