ellipsis单行文本和-webkit-box多行文本超出部分显示省略号

最新推荐文章于 2023-08-30 17:37:24 发布

djjj123456789

最新推荐文章于 2023-08-30 17:37:24 发布

阅读量279

点赞数

分类专栏： css 文章标签：省略号

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

用到了单行文本与多行文本超出部分显示省略号，记录一下笔记。

1.单行文本显示省略号

代码这样写文本会超出红线边框：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>超出部分显示省略号</title>
        <style type="text/css">
            p{
                width:100px;//宽度
                height:55px;//高度
                border:1px solid red;//边框
            }
        </style>
    </head>
    <body>
        <p>ellipsis单行文本和-webkit-box多行文本超出部分显示省略号</p>
    </body>
</html>

没有设定时文本会超出红线边框：
这里写图片描述

如果想使文本变成一行，超出部分显示省略号，则给p增加ellipsis和hidden样式：

p{
    width:100px;//宽度
    height:55px;//高度
    border:1px solid red;//边框
    text-overflow:ellipsis;//设定修剪方式
    white-space:nowrap; //设定换行方式，nowrap表示不换行
    overflow:hidden;//设定超出规定宽高部分则隐藏
}

效果：
这里写图片描述

2.多行文本显示省略号

上面的方法只能使用在单行文本，在多行文本时没有效果的，如果想使多行文本超出部分显示省略号，则需要使用另外一种方式，把上面的代码改成如下面的的代码就可以有超出部分显示省略的效果。

p{
    width:100px;//宽度
    height:55px;//高度
    border:1px solid red;//边框
    overflow:hidden;//超出部分隐藏
    display:-webkit-box;//设置盒子样式，-webkit-是兼容前缀
    -webkit-box-orient:vertical;//设置盒子参考方式
    -webkit-line-clamp:3;//设置超出多少行显示省略号
}