css如何讓文字強制換行

2021-09-29 19:05:35 字數 943 閱讀 6606

我們在編寫html時,

有時候,常常需要在移動端用到一些table的屬性,來呈現一些資料。如果說我們的資料內不含連續的數字或字母時,顯示是不會出錯的。

可是如果我們要呈現的資料為數字或長字母資訊時,常常會出現這樣的情況。

文字並沒有像我們預期那樣換行,設定的寬度無效了。

這是因為:

瀏覽器在解析我們頁面的時候,如果我們給定他連續的數字或字母,瀏覽器不會分開解析,而是會直接將這一長串當成乙個單詞,因此我們設定的寬度就失效了,不會自動切斷字串而進行換行。

解決方案:

如果我們要**中的文字強制換行(尤其是在一長串英文文字,並且中間無空格分隔的情況下),以達到使過長的文字不撐破**的目的,就需要在樣式中新增以下兩行**:

word-wrap: break-word;

word-break: break-all;

這兩行**起什麼用呢?

word-wrap:break-word; 和 word-break:break-all 解析:

1,word-break:break-all

//允許在單詞內換行。給定div寬,字元超過指定寬度就會自動換行。如果該行末端有個英文單詞很長(confidence等),它會把單詞截斷,變成該行末端為con(confidence的前半部分),下一行為fidence(fidence的後端部分)。

2,word-wrap:break-word

//允許長單詞換行到下一行。例子與上面一樣,但區別就是它會把confidence整個單詞看成乙個整體,如果該行末端寬度不夠顯示整個單詞,它會自動把整個單詞放到下一行,不會截斷單詞。

相容性問題:

word-break和word-wrap屬性都支援所有主流瀏覽器。

css樣式定義文字強制換行

在設計網頁時,我們常常會遇到文字換行的問題,然而一般的文字完全可以不用考慮,就是怕一些出現連續字串的問題,例如 11111111111111.aaaaaaaaaaaaaaa.21313a1f23d1f31.之類的文字情況,經過google的搜尋,發現很多答案並不完美,多多少少存在相容問題,經過自己的...

CSS強制換行

一般情況下,元素擁有預設的white space normal 自動換行,ps 不換行是white space nowrap 當錄入的文字超過定義的寬度後會自動換行,但當錄入的資料是一堆沒有空格的字元或字母或數字 常規資料應該不會有吧,但有些測試人員是會這樣子做的 超過容器寬度時就會把容器撐大,不換...

css強制換行

css實現強制不換行 自動換行 強制換行 在我們日常的編碼中經常會遇到這段文字不可以換行,或者自動換行的需求。雖然這個功能在我們平時很常見但是我相信大家一定不會可以的去記住它吧。今天我們來學習一下如何熟練的掌握用css實現文字的強制不換行 自動換行 強制換行的方法。需要的夥伴們可以來一起學習哦!di...