溢出的文字省略号显示

10个月前 (08-27) 679次浏览 已收录 0个评论

单行文本

单行文本溢出显示省略号必须满足三个条件:

  • white-space:nowrap; 强制一行内显示文本
  • overflow:hidden; 超出的部分隐藏
  • text-overflow:ellipsis 文字用省略号代替超出的部分
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单行文本溢出显示省略号</title>
    <style>
        div{
            width: 150px;
            height: 30px;
            background-color: rgb(180, 190, 90);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div>地方和奈拉蒂考时间费拉达斯距离放假啊三大</div>
</body>
</html>
结果演示

多行文本

多行文本溢出显示省略号,有较大兼容性问题,适合用于webkit浏览器内核

多行文本溢出显示省略号条件:

overflow:hidden;
text-overflow:ellipsis;
弹性伸缩盒子模型显示
display:-webkit-box;
限制一个块元素显示的文本的行数、
-webkit-line-clamp:2;
让里面所有的孩子垂直居中
-webkit-box-orient:vertical;

渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:溢出的文字省略号显示
喜欢 (2)

您必须 登录 才能发表评论!