css 实现文本显示省略符

最新推荐文章于 2024-04-30 19:38:51 发布

远走的兔子

最新推荐文章于 2024-04-30 19:38:51 发布

阅读量3.8k

点赞数

分类专栏： Web 文章标签： css 文本省略符

本文链接：https://blog.csdn.net/u014182411/article/details/80506553

版权

Web 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

一、测试代码结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .text {
        }
    </style>
</head>
<body>
    <div class="text">
            王力宏常被尊称为“亚洲流行音乐天王”，于亚洲国家有着巨大的影响力，尤其在中国大陆，台湾，
        香港，马来西亚，新加坡，日本， 韩国乃至印度等国家，其音乐作品让华语流行音乐获得西方国
        家如美国、英国、澳大利亚等地区所关注及接受，2010年英国权威音乐 杂志《WORD》封其为“东方猫王”。
        王力宏先后展开了四个世界巡回演唱会，也是第一个在中国鸟巢举办演唱会的流行音乐歌手。
    </div>
</body>
</html>

一、单行文本显示省略符

.text {
    margin: auto;
    width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

需要使用：

over-flow: hidden 防止div元素出现滚动条

white-space：nowrap 禁止文本换行

text-overflow: ellipsis 文本移除显示省略符

效果图;

二、固定多行文本显示省略符

1.webkit内核的浏览器

.text {
    margin: auto;
    width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

除了使用overflow和text-overflow之外，还必须使用一下三个属性，缺一不可：

display: -webkit-box 设置元素为弹性伸缩盒模型

-webkit-line-clamp: 2 设置文本显示行数

-webkit-box-orient: vertical 设置弹性伸缩盒子的子元素的排列方式

显示效果：

2.其他版本浏览器实现方法

使用伪元素在文本后面添加省略符。不过这种实现可能存在遮挡文字的情况，而且需要精确计算伪元素的位置

.text {
    position: relative;
    margin: auto;
    width: 300px;
    font-size: 16px;
    line-height: 16px;
    height: 32px;
    overflow: hidden;
}
.text::after {
    content: '...';
    position: absolute;
    right: 0;
    bottom: 0;
}

效果：

这种如果在文字不多的时候也会显示省略号。解决的办法是通过js去判断文字是否有溢出，从而决定是否显示添加伪类

远走的兔子

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
css 实现文本显示省略符

overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; white-space: no...
复制链接

扫一扫