文本溢出显示省略号
Posted tis100204
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了文本溢出显示省略号相关的知识，希望对你有一定的参考价值。
容器的溢出属性
说明：
overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;
visible:默认值，内容不会被修剪，会成现在元素框之外；
hidden：内容会被修剪，并且其余内容是不可见的；
scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;
auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;
inherit：规定应该从父元素继承overflow属性的值。
空余空间
说明：
white-space：normal/nowrap/pre/pre-wrap /pre-line /inherit 该属性用来设置如何处理元素内的空白；
normal：默认值，空白会被浏览器忽略，
nowrap:文本不会换行，文本会在同一行上继续，直到遇到
标签为止；
pre：空白会被浏览器保留，其行为方式类似html中的pre标签；
pre-wrap：保留空白符序列，但是正常的进行换行；
pre-line:合并空白符序列，但是保留换行符；
inherit：规定应该从父元素继承White-space属性的值；(ie浏览器不支持此属性值)
省略号显示
语法：
ext-overflow:clip/ellipsis
clip：不显示省略号（...），而是简单的裁切;
ellipsis：当对象内文本溢出时，显示省略标记；
说明：
1、text-overflow属性仅是...，当单行文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义：
2、容器宽度：width：value；
3、强制文本在一行内显示:white-space：nowrap;
4、溢出内容为隐藏：overflow：hidden；
单行文本溢出产生省略号
width：value;white-space：nowrap;overflow：hidden；text-overflow:ellipsis;
多行文本溢出产出省略号
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:value;overflow:hidden;
-webkit-line-clamp:value; 用来限制在一个块元素显示的文本行数
display:-webkit-box; 将对象作为弹性伸缩盒子模型显示
-webkit-box-orient:vertical; 必须结合的属性，设置或者检索伸缩盒子对象里子元素的排列方式
该方法适用于webkit浏览器和移动端，但文字未超出行时，也有省略号
以上是关于文本溢出显示省略号的主要内容，如果未能解决你的问题，请参考以下文章