文本单行省略号+多行出现省略号

简介: 文本单行省略号+多行出现省略号

第一种仅支持单行省略:

width:value;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

第二种支持多行省略:

width:value;
overflow : hidden;
text-overflow: ellipsis;
/* display:box主要是控制父容器里面子元素的排列方式 */
display: -webkit-box;
/*  实现限制文字显示多行,多余的用... */
-webkit-line-clamp: 2;
/* 属性规定框的子元素应该被水平或垂直排列。 */
-webkit-box-orient: vertical;


相关文章
|
1月前
|
前端开发
CSS文本单行溢出显示省略号与多行溢出显示省略号(简单易懂)
CSS文本单行溢出显示省略号与多行溢出显示省略号(简单易懂)
|
8月前
|
Web App开发 弹性计算 前端开发
CSS 单行/多行文本溢出显示省略号(...)的实现
CSS 单行/多行文本溢出显示省略号
140 0
CSS 单行/多行文本溢出显示省略号(...)的实现
|
11月前
效果:单行省略号,多行省略号
效果:单行省略号,多行省略号
36 0
多行文本溢出显示省略号
多行文本溢出显示省略号
49 0
|
JavaScript 前端开发
文本溢出显示省略号
文本溢出显示省略号
文本溢出显示省略号
CSS中溢出的文字省略号显示(单行和多行溢出)
CSS中溢出的文字省略号显示(单行和多行溢出)
CSS中溢出的文字省略号显示(单行和多行溢出)
|
前端开发
多行文本溢出显示省略号(…) +css样式
多行文本溢出显示省略号(…) +css样式
137 0
多行文本溢出显示省略号(…) +css样式
|
小程序
小程序填充文本怎么换行
小程序填充文本怎么换行
119 0
|
Web App开发 前端开发