這幾天在做項目的時候，遇到了比較棘手的問題，便是在一個標簽里邊展示內容，如果說展示中文漢字，一點問題都沒有，但是只要連續展示英文字母或者中文的標點符號（中間不帶空格），那么所渲染的內容就不會換行，而是超出標簽來顯示，如下圖：

　　

　　為了解決讓所有的內容都不超出標簽的寬度，超出后自動換行的問題，便找到了word-break這個屬性。

　　　　word-break的其中有兩個值為break-word和break-all，下面將對這兩個值做一比較：

　　　　　　break-word：英文單詞在一行中所剩下的空間無法放下，那么這個單詞并不會換行顯示，而是將這個單詞從盒子最大寬度處截開（一個單詞顯示兩行，前半截在第一行，后半截在第二行）；

　　　　　　break-all：英文單詞在一行中所剩下的空間無法放下，那么這個單詞就會換行顯示，保證單詞不會被截斷（一個單詞顯示一行）

　　所以解決這個問題的辦法就是在這個盒子上添加一個屬性word-break：break-word;就能搞定。

?

　　單行或多行容納不下內容顯示...less樣式

/*單行溢出*/ .one_txt_cut() {overflow: hidden;white-space: nowrap;text-overflow: ellipsis; } /*多行溢出 手機端使用*/ .txt_cut(@num:2) {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: @num;-webkit-box-orient: vertical; }

?

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的word-break属性和css换行显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。