CSS 解決文字溢位,換行

2022-07-05 02:51:14 字數 1037 閱讀 6962

當我們設定我的的div,或者其它文字框固定寬度之後,文字內容過多就會出文字溢位(顯示在區域外面,不換行的情況)。

這時我們可以使用css中的幾個屬於來解。有以下的三個屬於可以解決問題:

1,word-break 屬性規定自動換行的處理方法。

word-break: normal|break-all|keep-all;

描述normal

使用瀏覽器預設的換行規則。

break-all

允許在單詞內換行。

keep-all

只能在半形空格或連字元處換行。

2,overflow 屬性規定當內容溢位元素框時發生的事情。值描述

visible

預設值。內容不會被修剪,會呈現在元素框之外。

hidden

內容會被修剪,並且其餘內容是不可見的。

scroll

內容會被修剪,但是瀏覽器會顯示滾動條以便檢視其餘的內容。

auto

如果內容被修剪,則瀏覽器會顯示滾動條以便檢視其餘的內容。

inherit

規定應該從父元素繼承 overflow 屬性的值。

3,white-space 屬性設定如何處理元素內的空白。值描述

normal

預設。空白會被瀏覽器忽略。

pre空白會被瀏覽器保留。其行為方式類似 html 中的標籤。

nowrap

文字不會換行,文字會在在同一行上繼續,直到遇到

標籤為止。

pre-wrap

保留空白符序列,但是正常地進行換行。

pre-line

合併空白符序列,但是保留換行符。

inherit

規定應該從父元素繼承 white-space 屬性的值。

我使用的是 word-break:break-all來實現文字的換行,因為我們字元是中文導致換行會出現問題。使用overflow會出滾動條,如果是

允許有滾動條可以使用。white-space是屬於文字裡的空白字元,如果文字裡含有很多的空白字元我們可以考慮加上該屬性。

CSS 解決文字溢位,換行

當我們設定我的的div,或者其它文字框固定寬度之後,文字內容過多就會出文字溢位 顯示在區域外面,不換行的情況 這時我們可以使用css中的幾個屬於來解。有以下的三個屬於可以解決問題 1,word break 屬性規定自動換行的處理方法。word break normal break all keep ...

文字陰影 換行 溢位

文字陰影 文字陰影 text shadow 2px 2px 8px 000 文字陰影 文字換行 我是一些字 我是一些文字 我用的pre值 一些文字 我是一些文字 我用的pre wrap值 一些文字 我是一些文字 我用的pre line 一些文字 我是一些文字 我用的nowrap 一些文字 我要強制不...

CSS解決文字溢位問題

有時候乙個文字框中的文字太多,但文字框有設定的寬度,這是會出現文字溢位的現象,例如乙個li中文字數量較多,但li有自己的寬度,就會導致下面的情景 文字內容文字內容文字內容文字內容文字內容文文字內容文字內容 為了解決上面的問題,我們可以在css中設定如下 white space nowrap 強制性的...