一、文本溢出
当容器中的文本内容超出容器的宽度或高度时，就会出现文本溢出的情况。下面介绍几种CSS实现文本溢出的方法。
单行文本溢出省略：
单行文本溢出省略通常用于标题等文本显示，可以通过设置white-space和text-overflow属性实现。white-space属性：用来设置元素中的空白如何处理，默认值为normal，即会自动忽略多余的空格和换行符。当设为nowrap时，文本不会换行。
text-overflow属性：用来控制溢出文本的显示方式，默认值为clip，即将溢出部分截去。当设置为ellipsis时，会显示省略号。
代码示例：
<style> .overflow { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } </style> <div class="overflow">这是一段需要溢出省略的文本内容</div>讯享网
多行文本溢出省略：
多行文本溢出省略也可以通过设置text-overflow属性来实现。但是，text-overflow属性对于多行文本是不起作用的，需要结合其他属性来实现。
-webkit-line-clamp属性：用来限制显示的行数。
display属性：用来设置容器的display属性为-webkit-box，使其变成一个块级盒子。
-webkit-box-orient属性：用来设置块级盒子的排列方向为垂直方向。
代码示例：
讯享网<style> .overflow { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; } </style> <div class="overflow">这是一段需要溢出省略的多行文本内容，如果文本过长会出现省略号</div>
二、多行省略
多行省略主要是用来实现在固定高度的容器中，将超出容器高度的文本省略掉。同样，对于单行文本省略，可以使用text-overflow属性，但对于多行省略，则需要结合其他属性来实现。
使用纯文本实现
通过调整行高和高度来实现多行文本省略。
代码示例：
<style> .ellipsis { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 25px; height: 50px; } </style> <div class="ellipsis">这是一段需要省略的多行文本内容，如果文本过长会出现省略号</div>使用伪元素实现
通过伪元素在文本后面添加省略号来实现多行文本省略。
代码示例：
讯享网<style> .ellipsis::before { content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 10px; background: white; } .ellipsis { position: relative; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 25px; height: 50px; } </style> <div class="ellipsis">这是一段需要省略的多行文本内容，如果文本过长会出现省略号</div>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/47819.html