前端隨筆 html中文字不換行的處理方法

2021-08-20 21:02:46 字數 421 閱讀 6257

前言:在html中,連續的數字和字母,以及字母和數字的組合是不會自動換行的。如果想要設定自動換行,可以應用樣式:word-wrap: break-word;

1.有時,我們在前端,需要設計類似於這樣的訊息框,會限定訊息框的 width 和 height:

但是,如果當我們的訊息內容為數字或者字母的時候,就變成這樣的了

2.有漢字的話,還是正確的:

3.可以使用樣式 word-wrap: break-word; 進行文字的自動換行。

4.完整的對比如下:

注意:如果需要自己設計並使用類似於上面的訊息框時,最好設定換行樣式。因為消失可能是通過ajax動態獲取的,如果存放的訊息內容是純字母或者數字或者數字字母組合,而且內容又比較多,那就樣式錯亂了哦。

www.5ixiudou.com

,大家可以共同學習,共同進步

div中內容文字垂直居中 文字不換行顯示省略號

目錄 div中文字垂直居中 2 文字不換行,文字溢位顯示省略標誌 1 行高法 文字的行高和容器的高度相同,p2 內邊距 padding 法 適合一行或幾行文字垂直居中,原理就是利用padding將內容垂直居中 p3 css3的transform來實現 center vertical.center h...

css設定文字不換行並顯示省略號

1 單行文字顯示省略號 width value 具體的值 設定容器具體的寬度 white spacing nowrap 強制文字在一行內顯示 overflow hidden 溢位內容為隱藏 text overflow ellipsis 溢位文字顯示省略號 2 多行文字顯示省略號 display we...

div中文換行英文不換行的解決方法

在乙個width 100px的div塊裡輸中文到了100px會自動換行,英文卻會不斷加大width畫素 不會換行 這是怎麼回事?例項 問題 在乙個width 100px的div塊裡輸中文到了100px會自動換行,英文卻會不斷加大width畫素 不會換行 這是怎麼回事?答案 打英文的時候肯定是連打了,...