css之字体多行省略(兼容大部分浏览器)
字体单行显示省略号
<style> .box1{ width: 500px; height: 1.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } </style> <div class="box1"> 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 </div>
字体多行显示省略号
文本框盒子定义了宽高之后,设置它的右边距一个字符的宽度,用来显示省略号。设置文本框的盒子伪类before来显示省略号。使用绝对定位让它在右下角。
当然,它会一直显示在右下角,然后可以使用伪类after来遮住省略号,因为after是行内元素,它会跟着在文本的末端,设置它宽高为一个字符,当文本超出的的时候它会被超出部分隐藏。文本没有超出的时候,设置让它绝对定位,当字体没有超出文本盒子,它就会遮住省略号,当然after的背景色要与文本盒子的背景色一致!
<style>
.box{
position: relative;
width: 100%;
height: 3em; /* 高度是行高的几倍就是几行显示省略号 */
line-height: 1.5em;
font-size: 20px;
overflow: hidden;
padding-right: 1em;
box-sizing: border-box;
word-break: break-all;
background-color: white;
}
.box:before{
content: '...';
position: absolute;
right: 0;
bottom: 0;
}
.box:after{
position: absolute;
content: "";
margin-top: 0.5em;
right: 0;
width: 1em;
height: 1em;
background-color: white; //文本框的背景色一致
}
</style>
<div class="box">
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。