css實現單行和多行文字溢位顯示省略號

2021-10-04 04:20:28 字數 611 閱讀 9635

仗劍天涯,從你的努力開始

p

但是以上的不支援多行的溢位隱藏

div

display:-webkit-box; /將物件作為彈性伸縮盒子模型展示/

-webkit-line-clamp:2;/限制在乙個塊元素顯示的文字行數/

-webkit-box-orient:vertical;/設定或檢索伸縮物件的子元素排列方式/

overflow:hidden;/溢位隱藏/

text-overflow:ellipsis;/顯示省略號,代表溢位文字/

/*! autoprefixer: off */

-webkit-box-orient

: vertical;

/* autoprefixer: on */

/* autoprefixer: ignore next */

-webkit-box-orient

: vertical;

bug**

github解決方案

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

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

css 處理 單行 多行 文字溢位

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

單行 多行文字溢位隱藏

單行文字超出隱藏 在這裡插入 片 overflow hidden text overflow ellipsis white space nowrap 多行文字超出隱藏 在這裡插入 片 overflow hidden 超出隱藏 text overflow ellipsis 文字溢位時顯示省略標記 di...