CSS 溢位的處理

2021-07-31 11:52:56 字數 591 閱讀 6547

p
但是可能遇到的問題是,由於沒有限制height,p和div中的文字遇到邊界會自動換行,導致並沒有所謂的溢位。(亦可在上述基礎上直接設定限定的height值,則超出該部分的文字會被隱藏。但最好不要使用該方法)

使用的到的屬性:width、text-overflow、white-space、overflow

p
說明:通過text-overflow和white-space將文字控制在一行內,且寬度有限(width值),超出的部分隱藏(overflow)

該屬性用於設定文字溢位的部分,包括兩個值:clip(預設值)和ellipsis 。

該屬性用於設定如何處理元素中的空白,包括的值有normal(預設)、pre、pre-wrap、pre-line、nowrap、inherit。

設定該屬性值主要是為了處理文字中包含空白符與換行符的情況。通過nowrap值阻止文字的換行

p
僅針對基於webkit核心的瀏覽器(chrome、safari、搜狗高速瀏覽器、qq瀏覽器、360極速瀏覽器等)

(關於彈性盒模型明天再深入了解….)

CSS溢位處理

css定義中的overflow屬性,封裝了溢位處理的這個概念。在盒子模型中的代表標籤的矩形物件,可以通過css樣式來定義內容區域的高度與寬度,當這個內容無法容納子矩形物件時,對於這些子矩形物件必須決定怎麼顯示,顯示什麼,這樣的處理規則就稱為溢位處理。瀏覽器在做顯示運算的時候,會依照溢位處理,來計算內...

css 處理 單行 多行 文字溢位

1 單行溢位 前提必須有寬度 width 300px whitewhite space nowrap 文字不會換行。overflow hidden 溢位多餘裁剪 text overflow ellipsis 顯示省略符號來代表被修剪的文字。2 多行文字溢位 因使用了webkit的css擴充套件屬性,...

css 文字溢位

1 文字單行 文字單行 設定文字不換行,元素無法容納的文字會溢位。語法 text wrap none 此屬性為css3中的屬性,目前主流瀏覽器都不支援。如 缺省會換行 手機支付使用者規模已達2.76億,中國手機網民規模 5.94 億,較2014 年底增3679 萬人.wrap white space...