html文字溢位處理

2021-09-28 11:40:43 字數 900 閱讀 9691

在前端開發的實際操作中,我們在寫頁面遇到此類問題時直接複製下列**使用即可.

單行文字省略超出部分,顯示省略號(…)

overflow: hidden;

//超出部分隱藏

text-overflow: ellipsis;

//超出部分以省略號顯示

white-space: nowrap;

//超出部分強制不換行

多行文字省略超出部分,顯示省略號(…)並鎖定顯示文字的行數

overflow: hidden;

//超出部分隱藏

text-overflow: ellipsis;

//超出部分以省略號顯示

white-space: nowrap;

//超出部分強制不換行

display:

-webkit-box;

//將文字作為彈性盒子模型顯示

-webkit-box-orient: vertical;

//設定或檢索彈性盒模型的子元素的排列方式

-webkit-line-clamp: n;

//n用來鎖定文字顯示的行數,以數字形式展示(n表示顯示n行)

多行文字省略超出部分,自動換行

overflow: hidden;

word-break: normal;

word-wrap: break-word;

css3的換行

word-wrap:break-word;//允許長文字換行

word-break: keep-all;//單詞拆分換行 保留全部

word-break: break-all;//單詞拆分換行 拆分換行

html文字溢位處理方法 overflow

overflow溢位 值 visible hidden scroll auto inherit 初始值 visible 應用於 塊級元素 替換元素 表單元格 繼承性 無 注意 除了ie7 瀏覽器外,其他瀏覽器都不支援給table cell元素設定overflow屬性。firefox和ie11瀏覽器不...

vue多行文字溢位處理

在vue多行文字溢位的問題,工作中需要相容火狐,ie,和谷歌,新增文字kit字首的那種方式火狐和ie不相容,找到一種萬能的方法,如下 mounted fn.xdlines.defaults,options var this this for var k 0 k this.length k var s...

CSS溢位處理

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