【CSS】单/多行文字溢出省略号显示的效果

顷之

已于 2023-08-28 22:49:13 修改

阅读量620

点赞数 2

文章标签： css html 前端

于 2023-08-28 22:47:50 首次发布

本文链接：https://blog.csdn.net/m0_69101471/article/details/132549081

版权

一、单行文字溢出省略号显示

代码：

//1.先强制一行内显示文本
white-space:nowrap;(默认normal自动换行)
//2.超出的部分隐藏
overflow:hidden;
//3.文字用省略号替代超出的部分
text-overflow:ellipsis;

text-overflow：此样式属性可以设置文字溢出时用什么代替，属性值如一下：

clip：剪切文本

ellipsis：显示省略符号来代表被修剪的文本（常用）

string：使用给定的字符串来代表被修建的文本（不是所有浏览器都支持）

............

二、多行文字溢出省略号显示

overflow:hidden;
text-overflow:ellipsis;
//弹性伸缩盒子模型显示
display:-webkit-box;
//限制在一个块元素显示的文本的行数
-webkit-line-clamp:2;
//设置或检索伸缩盒对象的子元素的排列方式
-webkit-box-orient:vertical;

适用范围：

因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

注：

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

2、display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。

3、-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

如下效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .box{
            width: 170px;
            padding: 10px;
            margin: 0 auto;
        }
        .pic{
            width: 150px;
            height: 150px;
            border-radius: 5px;
            background-color: coral;
            margin-bottom: 5px;
        }
        .title{
            overflow: hidden;
            text-overflow: ellipsis;
            /* //弹性伸缩盒子模型显示 */
            display:-webkit-box;
            /* //限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp:2;
            /* //设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient:vertical;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="pic"></div>
        <div class="title">轻快华语|在轻松的旋律里充值快乐多幸福充值快乐多幸福</div>
    </div>
</body>
</html>

顷之

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
【CSS】单/多行文字溢出省略号显示的效果

1、-webkit-line-clamp 用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。3、-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。必须结合的属性，将对象作为弹性伸缩盒子模型显示。因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；string：使用给定的字符串来代表被修建的文本（不是所有浏览器都支持）ellipsis：显示省略符号来代表被修剪的文本（常用）
复制链接

扫一扫