首页 > 代码库 > 多行文本溢出显示省略号(…)

多行文本溢出显示省略号(…)

2024-09-15 19:25:36   223人阅读

(单行)省略号：

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

（双行）省略号：
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

注：

      在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ；注意：这是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

   -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。

    1. display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
    2. -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
    3. text-overflow: ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    
    body {
        line-height: 30px;
        width: 600px;
        margin: 0 auto;
    }
    
    .box1 {
        width: 200px;
        height: 30px;
        line-height: 30px;
        background-color: #632F2F;
        color: #fff;
        font-size: 20px;
        margin: 30px auto;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    
    .box2 {
        width: 200px;
        height: 60px;
        line-height: 30px;
        background-color: #632F2F;
        color: #fff;
        font-size: 20px;
        margin: 30px auto;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    
    .box3 {
        width: 600px;
        margin: 0 auto;
        border: 1px solid #ddd;
        position: relative;
        line-height: 20px;
        /* 3 times the line-height to show 3 lines */
        height: 100px;
        overflow: hidden;
    }
    
    .box3::after {
        content: "...";
        font-weight: bold;
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 20px 1px 45px;
        background: url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
    }
    
    .note {
        width: 600px;
        margin: 30px auto;
    }
    
    .red {
        font-size: 20px;
        color: red;
    }
    .box4{ width: 600px; height: 100px; margin: 20px auto; overflow: hidden; border:1px solid #ddd; }
    </style>
</head>

<body>
    <b>1.box1</b>
    <div class="box1">就回复开朗的抠脚大汉开奖号很快就好番窠倒臼客家话</div>
    <b>2.box2</b>
    <div class="box2">就回复开朗的抠脚大汉开奖号很快就好番窠倒臼客家话</div>
    <b>3.box3</b>
    <!-- 比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现； -->
    <div class="box3">WebKit Browsers will clamp the number of lines in this paragraph to 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="note">
        <p class="red"><b>box3</b>这里注意几点：</p>
        <p>1.结束的省略好用了半透明的png做了减淡的效果，或者设置背景颜色；</p>
        <p>2.IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用<span class="line-clamp">...</span>去模拟；</p>
        <p>3.要支持IE8，需要将<b>::after</b>替换成<b>:after</b></p>
    </div>
    <b>box4 JavaScript 方案</b>
    <p>1.Clamp.js  下载及文档地址：https://github.com/josephschmitt/Clamp.js</p>
    <div class="box4" id="box4">WebKit Browsers will clamp the number of lines in this paragraph to 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <script src="clamp.js" type="text/javascript"></script>
    <script type="text/javascript">
        var module = document.getElementById("box4");
        $clamp(module, {clamp: 3});
    </script>
</body>

</html>

效果图：

技术分享

 

多行文本溢出显示省略号(…)


联系
我们