这几天在项目需求里面遇到了很多之前没做过的需求，也慢慢更加认识到了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. Docker多主机互联最佳实践

    在公司使用docker多主机互联时碰到了各种坑.搞清楚后才发现如此简单,以下是根据实际经验的总结. 版本信息 Client: Version: 18.09.0 API version: 1.39 Go ...

  2. dos脚本1章

    第一节 常用批处理内部命令简介 批处理定义:顾名思义,批处理文件是将一系列命令按一定的顺序集合为一个可执行的文本文件,其扩展名为BAT或者CMD.这些命令统称批处理命令.小知识:可以在键盘上按下Ctr ...

  3. java编码与解码（一）

    转:https://blog.csdn.net/heyanxi0101/article/details/80356870 java编码与解码(一) 编码表概述和常见的编码表 概述:有字符及其对应的数值 ...

  4. Matlab R2015b_@Ubuntu 16_安装备忘

    1.下载解压包解压 2.cd 进入文件夹,使用 sh 打开,安装过程中不要使用“网络激活” 3.mv Crack文件中的 /R2015b/bin/glnxa64 里面的三个lib*.so 到Matla ...

  5. 我的学习目标（目前已初步学习完Java语言基础）

    操作系统.尤其是内存/线程/进程方面 计算机网络协议,重点关注 TCP/UDP/HTTP. 数据结构与算法. 数据库 设计模式,熟练掌握常用的几种设计模式. Java语言基础.熟悉java语言基础,了 ...

  6. 新增和编辑clob字段

    #region 新的数据新增和修改方法 /// <summary> /// 添加信息 /// </summary> /// <returns></return ...

  7. tomcat启动时报:IOException while loading persisted sessions: java.io.EOFException的解决方案 ZT

    错误代码如下: 严重: IOException while loading persisted sessions: java.io.EOFException java.io.EOFException ...

  8. JDK无法卸载问题解决

    在控制面板卸载JDK时,显示正在收集删除文件,进度条满了之后就闪退了,但JDK还在,试了几次都是如此. 后来,发现微软官方出了“修复阻止程序安装或删除的问题”的应用,可以自动修复包括阻止你安装或删除程 ...

  9. 虚函数表：QT5与VS2015的差异

    问题原自下面一段代码: 初学C++虚函数表时,以下代码在QT和VS(版本如题)编译结果不同. #include <iostream> using namespace std; class ...

  10. 2018.5.8 python操纵sqlite数据库

    创建: create_Email = "CREATE TABLE if not exists emails (\n\ id INTEGER NOT NULL,\n\ user VARCHAR ...