html - 关于CSS限定行数的问题

问题描述

问 题

现有以下布局：

<div>
    <p>.....</p>
    <p>.....</p>
    <p>.....</p>
    <p>.....</p>
</div>

P标签装的都是文本。
我需要把div的内容只显示为2行，超出部分用"..."显示，要怎么操作？

解决方案

<div class="multi-break">
    <p>.....</p>
    <p>.....</p>
    <p>.....</p>
    <p>.....</p>
</div>

<style>
.multi-break {
    position: relative;
    height: 50px;
    line-height: 25px;
    overflow: hidden;
}
.multi-break:after {
    content: '...';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 2em;
    background: #fff;
    text-align: right;
}
</style>

这篇关于html - 关于CSS限定行数的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！