这几天在项目需求里面遇到了很多之前没做过的需求，也慢慢更加认识到了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 来实时改变图标样式颜色，还有一些资源压缩工具，还是得好好学习，要学的东西太多了。

CSS控制文字显示一行，超出显示省略号的更多相关文章

  1. css控制文字长度，超出长度显示...

    css控制文字长度,超出长度显示... .style { max-width: 165px; overflow: hidden; white-space: nowrap; text-overflow: ...

  2. CSS控制字体在一行内显示不换行

    当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢?用CSS让文字在一行内显示不换行的方法: 一般的文字截断(适用于内联与块): .text-ov ...

  3. CSS控制文本在一行内显示，若有多余字符则使用省略号表示

    强制文本在一行内显示,多余字符使用省略号 text-overflow: ellipsis; overflow: hidden; white-space: nowrap;

  4. css让文字在一行内显示

    1.例如 p元素,里面的文字不换行显示,超出部分不隐藏 p{ width:100px; word-break:keep-all; white-space:nowrap; } 2.例如 p元素,里面的文 ...

  5. 用CSS让字体在一行内显示不换行（收藏）

    当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢? 用CSS让文字在一行内显示不换行的方法   一般的文字截断(适用于内联与块): .text- ...

  6. 用CSS让字体在一行内显示不换行

    青枫 , 2012/07/13 18:08 , css样式设计 , 评论(0) , 阅读(2189) , Via 本站原创 大 | 中 | 小  当一行文字超过DIV或者Table的宽度的时候,浏览器 ...

  7. --css 控制文字多使用省略号

    --css 控制文字多使用省略号.overflowPoint{ text-overflow:ellipsis;width: 200px;overflow: hidden;}<div class= ...

  8. CSS控制文字只显示一行 超出部分显示省略号

         <p style="width: 120px; height: 50px; border: 1px solid blue; white-space: nowrap; over ...

  9. CSS控制文字只显示一行，超出部分显示省略号

    <p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"&g ...

随机推荐

  1. 日积月累——java虚拟机内存区域的划分

    看了博主“一杯凉茶”一篇对java内存详解的文章后,虚心学习,并记录下来 ,以便日后再来温故. 一,运行时数据区 1.程序计数器 当前线程所执行的字节码行号指示器,字节码解释器工作依赖计数器控制完成, ...

  2. .NET并行计算和并发11：并发接口 IProducerConsumerCollection

    using System; using System.Collections; using System.Collections.Generic; using System.Collections.C ...

  3. Problem: Time（一道水却有意思的题

    Problem Description Digital clock use 4 digits to express time, each digit is described by 3*3 chara ...

  4. springboot +mybatis 搭建完整项目

    springboot + mybatis搭建完整项目 1.springboot整合mybatis注解版 转:https://blog.csdn.net/u013187139/article/detai ...

  5. 封装Thread的两种方法 via C++ in Linux

    方法一: 代理线程函数(proxyThreadFunc)作为类的静态成员函数, 回调函数指针作为类的私有成员变量 方法二: 代理线程函数(proxyThreadFunc)作为全局函数,  回调函数指针 ...

  6. iBATIS 调试

    在写完sql语句以后,如果参数有问题.还真不知道该如何看参数.原来Ibatis 是通过日志输出,看到参数的.IBatis 内置的日志输出是log4net,所以可以参考ibatis的api.照着复制其配 ...

  7. 2018上C语言程序设计(高级)- 第1次作业成绩

    作业地址 https://edu.cnblogs.com/campus/hljkj/CS2017-01/homework/1638 评分准则 第一次作业各项成绩包括三项: 完成PTA所有题目:20分 ...

  8. PTA L2-4 关于堆的判断

    先上题面 链接 https://pintia.cn/problem-sets/994805046380707840/problems/994805064676261888 首先,题目描述的很清楚,这是 ...

  9. css ——行级元素与块级元素解析

    一 . 先说说二者的本质区别吧:        行级元素是可以和其他元素处于一行,不用必须另起一行.块级元素是每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行. 二 .下面 ...

  10. firefox support.mozilla.org 的管理员没有正确配置好此网站。为避免您的信息失窃，Firefox 并未与此网站建立连接。

    1.在地址栏输入:"about:config"-我了解此风险: 2.右键-新建-布尔: 3.在框内输入:security.enterprise_roots.enabled-确定-搜 ...