控制内容字数，多余省略号表示

{

width: 200px;

white-space: nowrap; //强制不换行　（word-wrap:break-word; 强制连续字符换行）

overflow: hidden;

text-overflow:ellipsis;// 如果不想显示省略标记，将text-overflow设为clip

}

省略2或3行（ -webkit-line-clamp: 2/3;）

-webkit-line-clamp 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。
text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本。

语法

-webkit-line-clamp：<number>
默认值： ? ?表示不清楚；
适用于：块元素
继承性：无
动画性：否
计算值：指定的值

取值

<number>：
块元素显示的文本的行数。
* CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新

示例：（注意要设置固定高度，宽度可不限定）

{ font-size: 12px;line-height: 18px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;height:50px;

ellipsis省略号表示多余内容相关推荐

快速p掉多余内容ps修改ps去人物ps改图ps视频教程学习
快速p掉多余内容ps修改ps去人物ps改图ps视频教程学习
td 超出宽度隐藏_table中td文字超出长度用省略号隐藏超出内容，鼠标点击内容全部显示...
1,设置css样式 table { width: 100%; float: left; table-layout:fixed; width:600px; border:1px solid #ccc; ...
table中td文字超出长度用省略号隐藏超出内容，鼠标点击内容全部显示
1,设置css样式 <style> table { width: 100%; float: left; table-layout:fixed; width:600px; border:1p ...
如何清除计算机c盘的多余内容,怎么删除C盘多余的文件|电脑c盘哪些可以删除...
网上有不少用户在选购电脑的时候,会选择1TB以上的硬盘,因为那样可以存储更多的东西.但是在安装操作系统的时候,C盘的分区,也就是系统盘,分的空间不会太大,这就需要我们经常清理C盘的空间,这篇文章就是给 ...
CSDN文章直接打印,或者保存PDF（去掉多余内容）
注:该方法已更新,请参照新的文章: [新]CSDN文章一键打印.输出PDF(自动阅读全文.全清爽模式) 打印CSDN内容,将以下js复制放入工具->开发人员工具->console,回车 ...
去掉右键新建菜单多余内容
win10系统,右键->新建多了一些无用的菜单,去掉办法如下 1.打开regedit,展开到HKEY_CURRENT_USER - SOFTWARE - MICROSOFT - WINDOWS ...
安卓超过两行就加省略号_Android TextView内容过长加省略号，点击显示全部内容...
一.文字滚动文字左右滚动三个属性: android:singleLine="true" android:ellipsize="marquee" android ...
python将想要打印的数据输出到txt文件中，打印省略号里面的内容
本来是想完整输出npy文件,pycharm中只输出部分npy文件,结果输出的文件也是部分数据,代码在后面(代码参考博客忘了,抱歉啊) 后期又搜了如何完整输出的方法,写在后面了. import nump ...
CSS内容溢出时，显示省略号
在对网页进行美化的时候, 我们经常会需要截断内容, 以显示简洁内容, 然后通过链接查看详细内容, 以下给出两个例子. eg-1: 对于此情况, 并不是使用css控制显示省略号, 而是从服务器获取的内容 ...

ellipsis省略号表示多余内容

控制内容字数，多余省略号表示

语法

取值

ellipsis省略号表示多余内容相关推荐

最新文章

热门文章