这几天在项目需求里面遇到了很多之前没做过的需求，也慢慢更加认识到了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视频教程

    http://study.163.com/course/introduction.htm?courseId=1003203062#/courseDetail?tab=1

  2. Spring Boot 异步运用

    使用@Async标签 导入包 org.springframework.scheduling.annotation.Async 并配置并发线程池asyncTaskConfig 实现AsyncConfig ...

  3. 使用VMware Workstation 14 Player或者Oracle VM VirtualBox安装Fedora-Workstation-netinst-x86_64-27-1.6操作系统的相关记录

    无论是在使用哪个(VMware或者Oracle VM)都遇到了一个问题:即使在安装完Fedoras操作系统之后,进行Reboot还是会进入之前一摸一样的安装界面,相当于再次安装.然而最最有效的解决办法 ...

  4. vue-cli的使用（模板自定义、本地配置，eslint的配置）

    vue-cli(脚手架工具:帮助开发者完成基本的代码编写). 功能: 目录结构 本地调试 代码部署 热加载 单元测试 使用模板: vue init <template-name> < ...

  5. pagerank 数学基础

    网页排序的任务中,最核心的难点在于判别网页质量. 将互联网上的网页模拟为一个节点,而这个网页的“出链”看做是指向其他节点的一条“有向边”,而“入链”则是其他节点指向这个节点的有向边.这样整个网络就变成 ...

  6. OpenSSL生成RSA公私钥（java）

    生成私钥:genrsa -out rsa_private_key.pem 1024 生成公钥:rsa -in rsa_private_key.pem -out rsa_public_key.pem - ...

  7. linux虚拟机黑屏解决

    最近电脑上的虚拟机点击开机就一直黑屏,几次了,挂起时能够看到显示,但是开机就黑屏. 百度了之后找到了解决方案:(我是第一种方案就解决了)(据说可能是wegame的锅,用来打lol的....) 方法1: ...

  8. Hive与HBase表联合使用Join的问题

    hive与hbase表结合级联查询的问题,主要hive两个表以上涉及到join操作,就会长时间卡住,查询日志也不报错,也不会出现mr的进度百分比显示,shell显示如下图 如图: 解决这个问题,需要修 ...

  9. struts1和struts2和springMVC的区别和介绍

    MVC是web开发常用的模式,M即模型层(Model):主要由javabean来实现.V即视图层(View):主要由jsp.velocity.freemarker等.C即控制层(Controller) ...

  10. SVM问题汇总

    1.为什么要选择最大间隔分类器,请从数学角度上说明? 答:几何间隔与样本的误分次数间存在关系: 其中的分母就是样本到分类间隔距离,分子中的R是所有样本中的最长向量值 2.样本失衡会对SVM的结果产生影 ...