文本多行溢出显示...之最后一行不到行尾的解决

Posted jlfw

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了文本多行溢出显示...之最后一行不到行尾的解决相关的知识,希望对你有一定的参考价值。

多行文本溢出,但是最后一行木有到结尾,如下图这种例子

技术图片

解决代码示例
html:

    <div class="model_content">
        <p class="model_text">
            元素的“格式化首行”可能会存在于相同流下的块级子元素上元素的“格式化首行”可能会存在于相同流下的块级子元素上。元素的“格式化首行”可能会存在于相同流下的块级子元素上元素的“格式化首行”可能会存在于相同流下的块级子元素上元素的“格式化首行”可能会存在于相同流下的块级子元素上。元素的“格式化首行”可能会存在于相同流下的块级子元素上元素的“格式化首行”可能会存在于相同流下的块级子元素上元素的“格式化首行”可能会存在于相同流下的块级子元素上元素的“格式化首行”可能会存在于相同流下的块级子元素上能会存在于相同流下的块级子元素上。元素的“格式化首行”可能会存在于相同流下的块级子元素上元素的“格式化首行”可能会存在于相同流下的块级子元素上元素的“格式化首行”可能会存在于相同流下的块级子元素上元素的“格式化首行”可能会存在于相同流下的块级子元素上
        </p>
        <span class="model_detail">...<span class="more_detail">更多详情</span></span>
    </div>

css:

        * {
            margin: 0;
            padding: 0;
        }

        .model_content {
            padding: 0 30px;
            position: relative;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .model_text {
            font-size: 14px;
            color: #657180;
            text-align: justify;
            line-height: 24px;
        }

        .model_detail {
            width: 5em;
            position: absolute;
            right: 30px;
            bottom: 0;
            background: #fff;
            font-size: 14px;
            color: #657180;
        }

        .more_detail {
            position: absolute;
            right: 0;
            color: #4876f1;
            margin-left: 5px;
        }
    </style>

效果:
技术图片

总结:

将...拼在后面,宽度以em(基于父元素font-size)为单位,相当于遮住底下的文字内容而模拟这种效果,以em为单位的目的是防止遮住字不是整数个,希望以整字倍数为宽。

还有其他方法么?



以上是关于文本多行溢出显示...之最后一行不到行尾的解决的主要内容,如果未能解决你的问题,请参考以下文章

玩转Linux之基本命令2

js有办法删除行尾的空格么?

解决一行文本溢出隐藏点击展开之后全部显示并自动换行每行长度一致问题

css实现文本溢出省略(单行/多行)

css实现文本溢出省略(单行/多行)

在单个波段中具有多行时,数据溢出会拉伸一行