css兼容大部分浏览器的文本超出部分显示省略号

发布时间:2020-10-29 发布网站:编程之家
编程之家收集整理的这篇文章主要介绍了css兼容大部分浏览器的文本超出部分显示省略号编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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>

  

总结

以上是编程之家为你收集整理的css兼容大部分浏览器的文本超出部分显示省略号全部内容,希望文章能够帮你解决css兼容大部分浏览器的文本超出部分显示省略号所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478