多行实现文本溢出效果（实用）

最新推荐文章于 2024-03-01 15:43:08 发布

St_Sp_En

最新推荐文章于 2024-03-01 15:43:08 发布

阅读量1.5k

点赞数

文章标签： webkit 多行文本溢出

本文链接：https://blog.csdn.net/st_sp_en/article/details/78424261

版权

要实现单行文本溢出效果：

前提要给元素固定宽度，并且设置overflow:hidden;
然后联用下面属性：
white-space:nowrap; 是指不换行，就是说只能一行显示。
text-overflow:ellipsis; 在一行的最后用“ … ”来表示。

而有时我们需要在多行的时候，在最后一行的最后用“…”来表示，实现溢出效果：

1、在webkit为内核的浏览器中可以使用一个不规范的属性-webkit-line-clamp（ unsupported WebKit property ；没有出现在 CSS 规范草案中；作用是：限制在一个块元素显示的文本的行数），而且要结合display: -webkit-box;（将对象作为弹性伸缩盒子模型显示）和-webkit-box-orient：vertival;（设置或检索伸缩盒对象的子元素的排列方式）。例如给元素p一个.ellipsis的class

.ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

2、利用js（正则表达式来匹配）来模拟（要给外层div一个固定的height或者max-height; 和 overflow:hidden;）。eg：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            padding: 0;
            margin: 0;
        }
        .outer{
            width: 500px;
            height: 80px;
            line-height: 20px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="outer">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam corporis, deleniti dolor ducimus error eveniet fuga iusto laborum nisi odio perferendis reprehenderit sint sit temporibus voluptatibus. Cupiditate exercitationem quis voluptate. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam architecto consequatur dolores error facilis illo odio quis repellendus sed temporibus. Adipisci aliquam ea eaque esse iste nostrum numquam repellendus rerum! </p>
    </div>
    <script src="../js/jquery-1.12.4.js"></script>
    <script>
        $(".outer").each(function(i){
            var outerH = $(this).height();
            var $p = $("p", $(this)).eq(0);
            while ($p.outerHeight() > outerH) {
                $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
            };
        });
    </script>
</body>
</html>

效果：
多行文本溢出

3、用：after/ ::after伪类或者用图片插入（…）的方式不推荐，因为不自然

p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    /*background:url("ellipsis_bg.png") repeat-y;*/
}

4、用插件小工具：

Clamp.js https://github.com/josephschmitt/Clamp.js

var module = document.getElementById("clampjs");
$clamp(module, {clamp: 3});

ftellipsis https://github.com/ftlabs/ftellipsis

var element = document.getElementById('ftellipsis');
var ellipsis = new Ellipsis(element);

ellipsis.calc();
ellipsis.set();

jQuery.dotdotdot https://github.com/BeSite/jQuery.dotdotdot

$(document).ready(function() {
    $("#wrapper").dotdotdot({
        //  configuration goes here
    });
});

St_Sp_En

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多行实现文本溢出效果（实用）

要实现单行文本溢出效果：前提要给元素固定宽度，并且设置overflow:hidden;然后联用下面属性：white-space:nowrap; 是指不换行，就是说只能一行显示。text-overflow:ellipsis; 在一行的最后用“ … ”来表示。而有时我们需要在多行的时候，在最后一行的最后用“…”来表示，实现溢出效果：1、在webkit为内核的浏览器中可以使用一个不规范的属性-we
复制链接

扫一扫