在設計網頁時,我們常常會遇到文字換行的問題,然而一般的文字完全可以不用考慮,就是怕一些出現連續字串的問題,例如:11111111111111...;aaaaaaaaaaaaaaa...;21313a1f23d1f31...;之類的文字情況,經過google的搜尋,發現很多答案並不完美,多多少少存在相容問題,經過自己的測試研究,得到相容性更好的解決方法,總結出下類方法:
1:使用**來巢狀要強制文字換行的內容
用**做網頁排版的時候,一般都能正常使用。偏偏有時會碰到一段連續的英文詞或者一堆感嘆號(!!!)把網頁就撐開的現象:(
總結了一下,只要在css中定義了如下句子,可保網頁不會再被撐開了。
table
td(word-break: break-all; word-wrap:break-word;)
注釋一下:
1.第一條table,此樣式可以讓**中有!!!(感嘆號)之類的字元時自動換行。
2.td,一般用這句這ok了,但在有些特殊情況下還是會撐開,因此需要再加上後面一句
(word-wrap:break-word;)就可以解決。此樣式可以讓**中的一些連續的英文單詞自動換行。
2:使用css樣式定義要強制文字換行的內容
當容器有固定的寬度的時候,文字大於容器寬度的時候會自動折行,但是字母和數字的時候並不會折行,而是在一行顯示下去
硬是記不到這個東西!!!放這裡好隨時看!!!!!
style="word-break :break-all;"
style=「word-break :break-all;
word-wrap:break-word;
width:200px; /*定義寬度*/
display:block;/*定義為塊級,這一步很重要,儘管沒有這個屬性有時也會實現,隨著html5和css3的廣泛使用,這個屬相對於相容顯得更加重要*/
width:150px;/*要顯示文字的寬度*/
overflow:hidden; /*超出的部分隱藏起來。*/"
屬性解析:
ie:在容器的css中加word-break:break-all;
語法:word-break : normal | break-all | keep-all 取值:
normal : 預設值。允許在詞間換行
break-all : 該行為與亞洲語言的 normal 相同。也允許非亞洲語言文字行的任意字內斷開。該值適合包含一些非亞洲文字的亞洲文字
keep-all : 與所有非亞洲語言的 normal 相同。對於中文,韓文,日文,不允許字斷開。適合包含少量亞洲文字的非亞洲文字
語法:word-wrap : normal | break-word 取值:normal : 預設值。允許內容頂開指定的容器邊界
break-word : 內容將在邊界內換行。如果需要,詞內換行( word-break )也將發生
moz(firefox)
3:用js擷取字串強制換行
第三種方法本人沒有測試和使用過,詳細解析就沒有了
css如何讓文字強制換行
我們在編寫html時,有時候,常常需要在移動端用到一些table的屬性,來呈現一些資料。如果說我們的資料內不含連續的數字或字母時,顯示是不會出錯的。可是如果我們要呈現的資料為數字或長字母資訊時,常常會出現這樣的情況。文字並沒有像我們預期那樣換行,設定的寬度無效了。這是因為 瀏覽器在解析我們頁面的時候...
CSS強制換行
一般情況下,元素擁有預設的white space normal 自動換行,ps 不換行是white space nowrap 當錄入的文字超過定義的寬度後會自動換行,但當錄入的資料是一堆沒有空格的字元或字母或數字 常規資料應該不會有吧,但有些測試人員是會這樣子做的 超過容器寬度時就會把容器撐大,不換...
css強制換行
css實現強制不換行 自動換行 強制換行 在我們日常的編碼中經常會遇到這段文字不可以換行,或者自動換行的需求。雖然這個功能在我們平時很常見但是我相信大家一定不會可以的去記住它吧。今天我們來學習一下如何熟練的掌握用css實現文字的強制不換行 自動換行 強制換行的方法。需要的夥伴們可以來一起學習哦!di...