單行 多行文字溢位隱藏

2021-10-25 13:36:43 字數 576 閱讀 9612

單行文字超出隱藏:

在這裡插入**片

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

多行文字超出隱藏:

在這裡插入**片

overflow:hidden;/*超出隱藏*/

text-overflow:ellipsis;/*文字溢位時顯示省略標記*/

display:-webkit-box;/*設定彈性盒模型*/

-webkit-line-clamp:3;

-webkit-box-orient:vertical;/*子代元素垂直顯示*/

改方法只能在本地使用,可以嘗試在後面加上下面倆行**試試

/*! autoprefixer: off */

/*autoprefixer: on */

其他多行溢位隱藏方法:思路

///可以考慮用… + 定位來實現

首行縮排

text-indent: ;

單行 多行文字溢位隱藏顯示省略號

classname classname 其中多行文字中,因為我們使用了webkit的擴充套件屬性,該方法適用於核心為webkit的瀏覽器 注意 webkit line clamp是用來限制乙個塊元素顯示的文字行數。為了實現對應的效果,它需要結合其他的webkit屬性。常見的有 1 display w...

css 處理 單行 多行 文字溢位

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

css實現單行(多行)文字溢位顯示

overflow hidden text overflow ellipsis white space nowrap 當然還需要加寬度width屬來相容部分瀏覽。以上為單行文字溢位 以下為多行文字溢位 display webkit box webkit box orient vertical webk...