隐藏省略号html,文本超出隐藏出现省略号.html

文本超出隐藏时出现省略号

.box {

width: 100px;

height: 100px;

background-color: pink;

/* text-overflow: ellipsis; 超出的内容隐藏掉出现省略号 */

text-overflow: ellipsis;

/* 不自动换行，内容全部一行显示 white-space: nowrap */

white-space: nowrap;

overflow: hidden;

}

.box2 {

width: 100px;

/* height: 100px; */

background-color: plum;

margin-top: 20px;

/* text-overflow: ellipsis; 超出的内容隐藏掉出现省略号 */

text-overflow: ellipsis;

overflow: hidden;

display: -webkit-box;

/* 作为弹性伸缩盒子模型显示。 */

-webkit-box-orient: vertical;

/* 设置伸缩盒子的子元素排列方式--从上到下垂直排列 */

-webkit-line-clamp: 2;

/* 显示的行 */

}

title="显示全部内容：我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容">

我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容

我是前端切图仔，我很热爱学习前端知识也乐于分享前端知识。

一键复制

编辑

Web IDE

原始数据

按行查看

历史