css文本溢出显示省略号

最新推荐文章于 2023-08-21 07:35:15 发布

sherlonWang

最新推荐文章于 2023-08-21 07:35:15 发布

阅读量237

点赞数 2

分类专栏： css 文章标签： css 文本溢出

本文链接：https://blog.csdn.net/weixin_38483589/article/details/84205994

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

有时候我们只想让一段文字显示一行或者几行，其他多余的部分用省略号显示，该怎么做呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3处理文本溢出显示省略号...问题</title>
</head>
<style type="text/css">
    .box{
        width: 200px;
        height: 200px;
        margin:50px auto;
        border: 1px solid black;
    }
</style>
<body>
    <div class="box">
        <p class="text1">风萧萧，蝶恋空，无边落木怨苍穹，成败得失多少愁，挥袖一笑中;雨蒙蒙，追星梦，三更磨剑唤天虹，数载拼搏复相逢，举杯话英雄。</p>
    </div>
</body>
</html>

比如上面这个html,我们定义一个父容器div(class='box')，设置一下它的宽高和一些边距。在容器里面定义一个段落p,页面显示效果如下：

可以看到，上面p段落中的内容默认是全部显示出来的，假如只需要显示一行，多余的部分用省略号...来代替，该怎么弄呢？

我们只需要给文字所在容器（这里是p标签）加上以下样式就OK了。

    .text1{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

overflow:hidden,溢出部分隐藏

text-overflow:ellipsis,溢出后显示什么？这里显示省略号

white-space:nowrap,段落中的文本不进行换行

加上以上样式后显示效果如下，可以看到多余部分已经隐藏起来啦!

下面还有另一种处理方式，用以下样式：

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

对比上一种方式，前面两个属性不变，后面三个属性用到webkit内核渲染。

display: -webkit-box,弹性盒子设置
-webkit-line-clamp:1，块元素中显示文本行数
-webkit-box-orient: vertical，子元素应该被水平或垂直排列

效果如下：

可以看到，效果和之前的方法完全一样，但是它的第4个属性-webkit-line-clamp的值可以设置，这里是1，效果只显示一行，也可以设置为其他值，比如2,3，显示效果如下：

需要说明一点，上面webkit方式一般移动端用到的比较多，对于pc端使用webkit兼容性不是那么好。比如上面的webkit在谷歌浏览器ok,在IE下就不ok了。

sherlonWang

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css文本溢出显示省略号

有时候我们只想让一段文字显示一行或者几行，其他多余的部分用省略号显示，该怎么做呢？&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;css3处理文本溢出显示省略号...问题&lt;/title&gt;&
复制链接

扫一扫