在CSS中,為了讓一行文字換行成兩行,我們可以利用word-wrap
和white-space
這兩個屬性。
/* 讓長單詞或長鏈接在中間換行 */ .word-wrap { word-wrap: break-word; } /* 讓文字強制占滿兩行 */ .two-lines { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .two-lines:before { /* 隱藏省略號 */ content: ""; display: inline-block; margin-right: -0.5em; width: 0; height: 0; vertical-align: bottom; } .two-lines:after { /* 讓第二行文字顯示 */ content: ""; display: inline-block; width: 100%; }
以上代碼中,word-wrap
屬性可以讓長單詞或鏈接在中間換行,這樣可以有效減少了一行文字的長度,使得一行文字可以排在兩行中。
而white-space
和text-overflow
則是將文字強制占滿兩行。其中,white-space
的nowrap
值可以讓文字強制占用一行,overflow
則可以讓第二行的文字溢出隱藏。同時,使用text-overflow:ellipsis
讓多出來的文字顯示為省略號。
最后,我們通過偽元素來實現二行文字,利用其中一行的before
偽元素隱藏省略號,而另一行的after
顯示文字。
上一篇css中怎么讓警告框居中
下一篇mysql有 dual