这几天在项目需求里面遇到了很多之前没做过的需求，也慢慢更加认识到了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. 20165214 2018-2019-2 《网络对抗技术》Exp2 后门原理与实践 Week4

    <网络对抗技术>Exp2 PC平台逆向破解之"MAL_简单后门" Week4 一.实验内容 本次实验对象为名为pwn1的pwn1的linux可执行文件.程序正常执行流程 ...

  2. SHELL输出带颜色字体

    输出特效格式控制:\033[0m  关闭所有属性  \033[1m   设置高亮度  \03[4m   下划线  \033[5m   闪烁  \033[7m   反显  \033[8m   消隐  \ ...

  3. Wpf binging（一） 基础

    1.C# 代码后台绑定 分别步骤为 1. 准备数据源 2.实例化 binging对象   以及设置 该对象的 数据源 和数据源的访问路径(也就是该数据源的什么属性绑定) 3. 把前端ui控件的 Tex ...

  4. iOS和小米手机拍照上传后,在web端显示旋转

    ( ′◔ ‸◔`)现在的公司啊都流行混合开发,我们公司也不例外,非要把交互非常多的社区模块用内嵌web页展示,好吧好吧,毕竟有的应用也是这么做的,那既然是社区就肯定少不了用户上传图片的操作,在开发阶段 ...

  5. Excel 导入时如何下载模板信息（Java）

    大家知道,我们在实现 Excel 上传的时候,会让我们去下载个模板,然后实现导入功能.在此我在这里记录下来,以便后续的使用... 首先思考一个问题是 这个模板这么给前台,还有这个模板是这么来的,刚开始 ...

  6. compareTo的用法

    在java编程中,我们会偶尔遇到字符串大小比较的问题,compareTo()方法很简单就实现这种功能.该方法用于判断一个字符串是否大于.等于还是小于另一个字符串.判断字符串大小的依据是根据它们在字典表 ...

  7. 连续多次调用inet_ntoa()结果重复

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <pcap.h> ...

  8. zuul1.3源码扒一扒（1）

    先开个头吧 作为偶尔点进源码的时候看到东西,或是学到,或是不解,或是惊讶,之后的一些记录.从springcloud各个组件开始吧,计划文段保持间断,只道出核心点,不过各个文段保持连续. zuul作为s ...

  9. Python多线程的运行及time.sleep()的应用

    已知小明和其弟弟小白每月都需要生活费,二人同时从同一个账户中取钱,两人每人每月需要1000元,账户中现有余额3200元,如果卡内余额大于2000元,则父母不会存入,如果卡内余额小于2000元,则父母当 ...

  10. Windows服务器修改网站上传文件的大小限制

    ASP程序 方法一: 修改该网站的的最大上传文件的大小限制 在Windows server上会出现上传大小受限制的问题,这是由于windows server的IIS管理器做了限制所致,IIS默认设置是 ...