CSS样式学习之--限定标签宽度,内容超出部分显示为省略号(...).docxVIP

 HYPERLINK /hellman/p/5755376.html CSS控制文字，超出部分显示省略号 1、单行文本溢出显示省略号 前端页面展示的时候经常会遇到诸如列表(ul)，表格(table)，以及输入框(input)，段落(p)一类的需要展示数据的标签。如果数据长度比这些标签限定的长度小，或者相等，那都不是问题，可以直接显示。但很多时候数据长度并不是合适的，那么一旦数据过长就会将这些容器标签撑开(没有限定容器的width)或者自动换行(限定了容器的width)，从而导致整个页面结构出错，显示错乱。比如： 所以需要将这些超出的内容显示为省略号(…)，从而使得整个界面看上去协调和美观。溢出显示省略号用text-overflow:ellipsis属性实现，当然需要为容器限定宽度，即width属性。 1.1实现方法：通过以下三个属性组合实现省略号显示 overflow: hidden; overflow 属性规定当内容溢出元素框时发生的事情。 text-overflow:ellipsis; text-overflow 属性规定当文本溢出包含元素时发生的事情。 white-space: nowrap; white-space 属性设置如何处理元素内的空白 .text-overflow{ //将属性写成类，便于引用，通用性强！ overflow: hidden; text-overflow:ellipsis; white-space: nowrap;} 效果如图： 但是这个属性的组合只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号。那么就需要另外的属性组合。接下来重点说一说多行文本溢出显示省略号，如下。 2、多行文本溢出显示省略号 2.1实现方法如下： 实现方法可以直接写成标签属性；也可以写成类，通过class进行添加；或者直接以style方式内联。 p{ line-height: 20px; max-width: 400px; max-height: 60px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .overflow{ line-height: 20px; max-width: 400px; max-height: 60px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } 效果如图： 适用范围：因使用了WebKit内核的CSS扩展属性，该方法适用于WebKit内核的浏览器及移动端； 注释： -webkit-line-clamp用来限制在一个块元素显示的文本的行数。?为了实现该效果，它需要组合其他的WebKit属性。 常见结合属性： 1.display:?-webkit-box;?必须结合的属性，将对象作为弹性伸缩盒子模型显示。 2.-webkit-box-orient?必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。 3. overflow: hidden; 必须结合的属性，设置当内容溢出元素框时发生的事情（hidden:内容会被修剪，并且其余内容是不可见的。） 4.当然容器标签的最大宽高max-width，max-height也需要设定，不限定最大宽高，其他样式也不起作用。 下面这部分是对多行文本溢出显示省略号的补充和不同浏览器的兼容处理： p::after{content: ...; position: absolute; bottom: 0; right: 0; padding-left: 40px; background: -webkit-linear-gradient(left, transparent, #fff 55%); background: -o-linear-gradient(right, transparent, #fff 55%); background: -moz-linear-gradient(right, transparent, #fff 55%); background: linear-gradient(to right, transparent, #fff 55%); } 效果如图： 适用范围：该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js代码优化该方法。 注释： 1