html,css中處理文字換行的問題

2021-09-24 02:17:45 字數 436 閱讀 6374

最近在做專案的時候發現,從資料庫中拿回來的值太長了,需要對文字進行換行或者溢位處理的時候,有些屬性記的不是很清楚,所以總結一下,網頁中基本的文書處理問題。

1. word-break:break-all;只對英文起作用,以字母作為換行依據

2. word-wrap:break-word; 只對英文起作用,以單詞作為換行依據

3.white-space:pre-wrap; 只對中文起作用,強制換行

4.white-space:nowrap; 強制不換行,都起作用

5.white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不換行,超出部分隱藏且以省略號形式出現,這個在網頁中用的也是比較多的乙個屬性注意。

一定要指定容器的寬度,不然是沒有效果的

要注意word-break 是ie5+專有屬性

文字換行處理

對文字換行的處理有white space word wrap word break 強制不換行 p 自動換行 p 強制英文單詞斷行 p 注意 設定強制將英文單詞斷行,需要將行內元素設定為塊級元素。超出顯示省略號 pwhite space normal pre nowrap pre wrap pre ...

HTML CSS樣式中,自動換行

在專案實際應用中出現了 的內容不會換行,本文列舉了相容 ie 和 ff 的換行 css 推薦樣式,詳細介紹了word wrap和word break的區別。相容 ie 和 ff 的換行 css 推薦樣式 最好的方式是 style word wrap break word overflow hidde...

關於文字空格換行處理

white space 屬性會影響到使用者 對源文件中的空格 換行和 tab 字元的處理。通過使用該屬性,可以影響瀏覽器處理字之間和文字行之間的空白符的方式。從某種程度上講,預設的 xhtml 處理已經完成了空白符處理 它會把所有空白符合併為乙個空格。所以給定以下標記,它在 web 瀏覽器中顯示時,...