zoukankan      html  css  js  c++  java
  • CSS控制文字显示一行,超出显示省略号

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

    “CSS控制文字显示一行,超出显示省略号”,我自己做的时候,因为场景的div宽度是固定的,我就直接截取了文本的前 X 个字符显示,类似于这样:

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

    其实这样做有很大的弊端,网站每次数据刷新的时候,都要这样做一次,最后发现可以用css实现,如下所示:

    <!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 来实时改变图标样式颜色,还有一些资源压缩工具,还是得好好学习,要学的东西太多了。

  • 相关阅读:
    使用PowerDesigner 15对现有数据库进行生成图表结构
    dynamic的使用
    js 字符串的replace() 方法和实现replaceAll() 方法
    学习新属性 requestAnimationFrame
    Mapbox 地图样式规范
    Emmet插件使用方法总结
    js循环遍历性能
    lunix部署其前端项目常见报错
    componentWillMount和componentDidMount的区别
    控制浏览器禁止缓存
  • 原文地址:https://www.cnblogs.com/catherinezyr/p/9334698.html
Copyright © 2011-2022 走看看