码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-06-28 11:20:06      阅读:98      评论:0      收藏:0      [点我收藏+]

标签:div   osi   多行   字体   就会   dde   overflow   哈哈   tom   

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兼容大部分浏览器的文本超出部分显示省略号

标签:div   osi   多行   字体   就会   dde   overflow   哈哈   tom   

原文地址:https://www.cnblogs.com/kongyijilafumi/p/13201829.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!