在网页中，有时会看到一段文字没有说完，后面是以省略号出现，这其实就是文本溢出的处理方式，本篇文章就给大家来介绍关于多行文本溢出的解决方案。
1.单行文本溢出点点点
单行文本溢出是最常见的一种形式，使用text-overflow的ellipsis即可实现点点点，overflow属性也不可少，同时不能让容器换行，否则不会出现点点点
.ellipsis { width: 300px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
登录后复制
2.多行文本溢出点点点
随着内容的增多，单行文本不够用了，多行文本才是用的最多的地方。四个属性缺一不可，最重要的是-webkit-line-clamp，直接定义了要显示的行数，
.ellipsis { width: 300px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* 自定义的行数 */ overflow: hidden;}
登录后复制
3.多行文本溢出自定义
点点点是最常见的溢出省略方式，但是21世纪的设计师已经不满足使用点点点的方式来实现省略了，他们还需要在尾部显示更多按钮，点击之后显示全部内容。这个时候就需要想办法了，下面的终极方案实在是精彩，请移步这里，聆听大神讲解，
//dom结构腾讯成立于1998年11月，是目前中国领先的互联网增值服务提供商之一。成立10多年来，腾讯一直秉承“一切以用户价值为依归”的经营理念，为亿级海量用户提供稳定优质的各类服务，始终处于稳健发展状态。2004年6月16日，腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。...更多
登录后复制
.ellipsis { position: relative; width: 100%; max-height: 55px; /* h*n */ line-height: 18px; /* h */ overflow: hidden; width: 300px}.ellipsis-container { position: relative; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* n */ font-size: 50px; /* w */ color: transparent;}.ellipsis-content { color: #000; display: inline; vertical-align: top; font-size: 16px; /* f */}.ellipsis-ghost { position:absolute; z-index: 1; top: 0; left: 50%; width: 100%; height: 100%; color: #000;}.ellipsis-ghost:before { content: ""; display: block; float: right; width: 50%; height: 100%;}.ellipsis-placeholder { content: ""; display: block; float: right; width: 50%; height: 55px; /* h*n */}.ellipsis-more { position: relative; float: right; font-size: 16px; /* f */ width: 50px; /* w */ height: 18px; /* h */ margin-top: -18px; /* -h */ color: red}
登录后复制
相关推荐：
css单行文本与多行溢出文本的省略号问题
css单行文本与多行溢出文本的省略号问题
以上就是自定义文本溢出方案的总结（代码）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2892809.html
