单行或多行文本溢出

最新推荐文章于 2024-01-02 17:04:47 发布

Jyann~

最新推荐文章于 2024-01-02 17:04:47 发布

阅读量187

点赞数

分类专栏： css 前端文章标签： css javascript css3

原文链接：https://vue3js.cn/interview/css/single_multi_line.html#%E4%B8%80%E3%80%81%E5%89%8D%E8%A8%80

版权

前端同时被 2 个专栏收录

173 篇文章 13 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

1.单行文本溢出

<style>
    p{
        /* 隐藏溢出文本 */
        overflow: hidden;
        line-height: 40px;
        width:400px;
        height:40px;
        border:1px solid red;
        /* 当对象内文本溢出时显示省略标记（...） */
        text-overflow: ellipsis;
        /* 设置文本不换行，是overflow:hidden和text-overflow：ellipsis生效的基础 */
        white-space: nowrap;
    }
</style>

<body>
    <p> 这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本</p >
</body>

2.多行文本溢出

多行文本溢出的时候，我们可以分为两种情况：

基于高度截断
基于行数截断

2.1基于高度截断：伪元素 + 定位

核心的css代码结构如下：

position: relative：为伪元素绝对定位
overflow: hidden：文本溢出限定的宽度就隐藏内容）
position: absolute：给省略号绝对定位
line-height: 20px：结合元素高度,高度固定的情况下,设定行高, 控制显示行数
height: 40px：设定当前元素高度
::after {} ：设置省略号样式

<style>
    .demo {
        position: relative;
        line-height: 20px;
        height: 40px;
        overflow: hidden;
    }
    .demo::after {
        content: "...";
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 20px 0 10px;
    }
</style>

<body>
    <div class='demo'>这是一段很长的文本</div>
</body>

实现原理很好理解，就是通过伪元素绝对定位到行尾并遮住文字，再通过 overflow: hidden 隐藏多余文字

这种实现具有以下优点：

兼容性好，对各大主流浏览器有好的支持
响应式截断，根据不同宽度做出调整

一般文本存在英文的时候，可以设置word-break: break-all使一个单词能够在换行时进行拆分

2.2基于行数截断

纯css实现也非常简单，核心的css代码如下：

-webkit-line-clamp: 2：用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的WebKit属性）
display: -webkit-box：和1结合使用，将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical：和1结合使用，设置或检索伸缩盒对象的子元素的排列方式
overflow: hidden：文本溢出限定的宽度就隐藏内容
text-overflow: ellipsis：多行文本的情况下，用省略号“…”隐藏溢出范围的文本

<style>
    p {
        width: 400px;
        border-radius: 1px solid red;
        /* 用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的WebKit属性） */
        -webkit-line-clamp: 2;
        /* 和-webkit-line-clamp结合使用，将对象作为弹性伸缩盒子模型显示 */
        display: -webkit-box;
        /* 和-webkit-line-clamp结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 */
        -webkit-box-orient: vertical;
        /* 文本溢出限定的宽度就隐藏内容 */
        overflow: hidden;
        /* 多行文本的情况下，用省略号“…”隐藏溢出范围的文本 */
        text-overflow: ellipsis;
    }
</style>

<body>
    <p>
        这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
        这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
        这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
    </p >
</body>

可以看到，上述使用了webkit的CSS属性扩展，所以兼容浏览器范围是PC端的webkit内核的浏览器，由于移动端大多数是使用webkit，所以移动端常用该形式

需要注意的是，如果文本为一段很长的英文或者数字，则需要添加word-wrap: break-word属性

2.3css配合js实现

p {
    position: relative;
    width: 400px;
    line-height: 20px;
    overflow: hidden;
}
.p-after:after{
    content: "..."; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -moz-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(left, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}

$(function(){
 //获取文本的行高，并获取文本的高度，假设我们规定的行数是五行，那么对超过行数的部分进行限制高度，并加上省略号
   $('p').each(function(i, obj){
        var lineHeight = parseInt($(this).css("line-height"));
        var height = parseInt($(this).height());
        if((height / lineHeight) >3 ){
            $(this).addClass("p-after")
            $(this).css("height","60px");
        }else{
            $(this).removeClass("p-after");
        }
    });
})

Jyann~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
单行或多行文本溢出

实现原理很好理解，就是通过伪元素绝对定位到行尾并遮住文字，再通过。需要注意的是，如果文本为一段很长的英文或者数字，则需要添加。内核的浏览器，由于移动端大多数是使用。一般文本存在英文的时候，可以设置。使一个单词能够在换行时进行拆分。属性扩展，所以兼容浏览器范围是。实现也非常简单，核心的。，所以移动端常用该形式。可以看到，上述使用了。
复制链接

扫一扫