CSS文本超出2行就隐藏并且显示省略号

超出一行隐藏:

overflow:hidden; //超出的文本隐藏

text-overflow:ellipsis; //溢出用省略号显示

white-space:nowrap; //溢出不换行

但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？

超出两行隐藏:

css3解决了这个问题，解决方法如下：

display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）

-webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。

所以,最后的结果:

overflow:hidden;

text-overflow:ellipsis;

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;

CSS文本超出2行就隐藏并且显示省略号相关推荐

css 文本超出2行就隐藏并且显示省略号
今天做东西,遇到了这个问题,百度后总结得到了这个结果. 首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用 ...
安卓超过两行就加省略号_CSS文本超出2行就隐藏并且显示省略号
超出一行隐藏: overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行但是 ...
标题文字超出2行则隐藏后面显示省略号
css小技巧 overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-b ...
css 文本超出2行显示点点点
.product-name {// height: 45px;// word-break: break-all;// text-overflow: ellipsis; // text-overflow ...
项目中css样式：多行自动换行，单行显示省略号（样式代码）
1.单行超出线长度显示省略号 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; //若无效,可设置display:inline- ...
文本长度过长时隐藏并显示省略号“...”，以及鼠标停留时悬浮显示全部文本(兼容IE)
效果如下: html 如下 <el-form-item label="备注" label-width="60px"><span class=& ...
使用CSS样式设置文本超出2行显示为省略号
设置文本超出2行显示为省略号在设计前端页面中,我们经常会遇到文本太长导致超出规定区域的情况. 我们只需要在文本中设置以下样式即可解决该问题: html页面: <div class=" ...
CSS文本超出部分利用省略代替
一.操作我们经常在写页面的时候会碰到文字内容太多超过盒子内容对于这种情况我们常常会用overflow:hidden来隐藏,但是今天就要告诉大家一个新的小知识点,我们可以用它将超出部分的文章隐藏,并用 ...
文本超出隐藏并显示省略号
文本超出隐藏并显示省略号单行 overflow: hidden;text-overflow: ellipsis;white-space: nowrap; 多行 overflow: hidden;te ...

CSS文本超出2行就隐藏并且显示省略号

CSS文本超出2行就隐藏并且显示省略号相关推荐

最新文章

热门文章