CSS处理文本过长或超出部分解说二

47次阅读

共计 744 个字符,预计需要花费 2 分钟才能阅读完成。

解说一中的方法不兼容火狐、IE 浏览器,所以解说二会给出通用的 css 写法。

原理:两个盒子 a、b,文字内容放于盒子 b,固定盒子 a 的高度及行高,超出 a 的内容隐藏,在结尾处放置省略号,如下图,红线圈出部分用省略号覆盖。

        .a{
            width: 300px;
            /* 想要显示几行,高度就是行高 * 倍数 */
            height: 52px;
            line-height: 26px;
            overflow: hidden;
            border: 1px solid #ddd;
        }
        .a::before{
            float: left;
            width: 5px;
            content: '';
        }
        .a::after{
            height: 26px;
            content: "...";
            line-height: 26px;
            width: 3em;/* 省略号宽度 */
            margin-left: -1em;/* 使省略号在文字的最末端 */
            position: relative;
            top: 26px;
            left: 100%;
            background-color: #fff;
        }
        .b{
            float: right;
            margin-left: -5px;
            width: 100%;
            line-height: 26px;
            word-break: break-all;
        }
<div class="a">
    <div class="b"> 在网页开发中,经常会遇到文本超出了限定的范围,尤其是屏幕尺寸的大小导致的,着实影响美观,这个时候,就需要用 css 对其进行处理。下面的方法是我在实际工作中总结出来的,给大家参考一下。</div>
</div>

超出盒子 a 的内容都被隐藏掉了,在第二行结尾处,用‘…’覆盖了其他的文字,效果如下图所示:

这个方法存在的问题是 :使用的文字的格式,内容的不同,有可能放置的省略号的位置可能不会那么正好合适,如果有更合理的方式,欢迎留言解答。如下图所示:

正文完
 0