CSS控制文字显示一行，超出显示省略号

时间 2019-12-14

标签 css 控制文字显示一行超出省略号栏目 CSS 繁體版

原文原文链接

这几天在项目需求里面遇到了不少以前没作过的需求，也慢慢更加认识到了css的强大，是真的强大。之后会把本身技术调研的东西都写出来，哪怕只是一点点或者很小的点，重在学习。css

“CSS控制文字显示一行，超出显示省略号”，我本身作的时候，由于场景的div宽度是固定的，我就直接截取了文本的前 X 个字符显示，相似于这样：html

str = str.slice(0,10) +"……"';

其实这样作有很大的弊端，网站每次数据刷新的时候，都要这样作一次，最后发现能够用css实现，以下所示：svg

<!DOCTYPE html>
<html>
<head>
    <title>CSS控制文字显示一行，超出显示省略号</title>
    <style type="text/css">
        .text-line{
            height: 100px;
            background-color: #AAA8A8;
            display: inline-block;
            /*下面是必需的*/
            width: 100px;
            color: #000;
            white-space: nowrap;/*把文本强制显示在一行*/
            overflow: hidden;/*隐藏超出部分的文字*/
            text-overflow: ellipsis;/*超出显示省略号*/
        }
    </style>
</head>
<body>
    <div class="text-line">超出一行只显示部分，后面的显示省略号…，利用css实现，而不是本身去判断留多少个字</div>
</body>
</html>

最近还发现了 css 的 content 属性，还有一些 .svg 的 icon 能够直接修改.svg 中的 fillColor 来实时改变图标样式颜色，还有一些资源压缩工具，仍是得好好学习，要学的东西太多了。工具