单/多行文本溢出省略

RayKr 发布于2019-08-30 11:18 / 1158人阅读

摘要：单行文本溢出省略注一定要给容器定义宽度少了，文字会撑到容器外面少了，文字会被裁切少了，没有省略号，文字不会隐藏。多行文本溢出省略注，块元素显示的文本行数，可以改成想要的行数，该属性规定子元素应该被垂直排列。

单行文本溢出省略：

overflow:hidden;
text-overflow:ellipsis;
white-space:noerap;

注：一定要给容器定义宽度；
少了overflow:hidden，文字会撑到容器外面；
少了text-overflow:ellipsis，文字会被裁切;
少了white-space:noerap，没有省略号，文字不会隐藏。

2/多行文本溢出省略：

overflow：hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2

注：-webkit-line-clamp:2，块元素显示的文本行数，2可以改成想要的行数n；
-webkit_box-orient:vertical，该属性规定子元素应该被垂直排列。

GPU云服务器云服务器 php文本溢出省略溢出文本读取多行文本 html里的多行文本

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114911.html

【前端芝士树】纯CSS实现多行文本溢出显示省略号

摘要：前端芝士树纯实现多行文本溢出显示省略号使用来控制行数由于用来限制在一个块元素显示的文本的行数这是一个不规范的属性，它没有出现在规范草案中，为了实现该效果，它需要组合其他外来的属性。【前端芝士树】纯CSS实现多行文本溢出显示省略号使用-webkit-line-clamp来控制行数由于-webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性（u...

CNZPH 2019-08-30 15:54 评论0 收藏0
CSS实现单行、多行文本溢出显示省略号

摘要：如果实现单行文本的溢出显示省略号同学们应该都知道用属性来，当然还需要加宽度属来兼容部分浏览。接下来重点说一说多行文本溢出显示省略号，如下。如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。实现方法： overflow: hidden; text-overflow:ellipsis; whit...

番茄西红柿 2019-04-23 14:39 评论0 收藏0
多行文本溢出时出现省略号

摘要：多行文本溢出时出现省略号本文推荐种方法。溢出时不显示溢出的内容发生溢出时使用省略号代替浏览器的私有属性。显示指定的文本。显示多少行块级元素。默认显示的替代文本延迟多长时间后执行是否有窗口大小改变时执行默认操作具有这个类的元素。多行文本溢出时出现省略号本文推荐2种方法。 1. css tip：只兼容chrome内核的浏览器。ff不支持。 .box { overflow: hi...

王伟廷 2019-08-29 15:43 评论0 收藏0
CSS - 纯css实现多行文本溢出省略（兼容所有浏览器）

摘要：前言多行文本超出高度限制出现省略号移动端多为内核的有扩展属性但并不是规范中的属性端往往要借助去实现这一效果，但麻烦且不是很靠谱，今天就用纯来实现一个完全兼容的多行省略。前言多行文本超出高度限制出现省略号 , 移动端多为webkit内核的 , 有扩展属性-webkit-line-clamp , 但并不是CSS规范中的属性 , PC端往往要借助js去实现这一效果，但麻烦且不是很靠谱，今...

李义 2019-08-29 12:21 评论0 收藏0