这几天在项目需求里面遇到了很多之前没做过的需求，也慢慢更加认识到了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. 爬取QQ音乐歌手的歌单

    import requests# 引用requests库res_music = requests.get('https://c.y.qq.com/soso/fcgi-bin/client_search ...

  2. golang对不同系统的编译

    Golang 支持在一个平台下生成另一个平台可执行程序的交叉编译功能. Mac下编译 # mac编译linux执行文件 CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go ...

  3. input ,button, textarea 1)使用disabled , 2) 显示值, 3) 表单提交. 4) jquery.form.js ajaxSubmit() 无刷新ajax提交表单.

    1.使用disabled input , button  textarea 可以 被 禁用, 禁用的效果 : 1) 上面的点击事件无法使用 --- button       : 下面的 onclick ...

  4. javascript 使用数组+循环+条件实现数字转换为汉字的简单方法。

    这几天,博主碰到了几道关于数字转汉字的javascript算法题,在网上找了很多的答案,发现都有点复杂,于是我决定自己写一篇关于这种算法题的简单解法,以下是博主自己的见解,有不足的地方请多指教. 接下 ...

  5. java如何快速创建List

    几个快速添加list的方法 1. 使用Collections.addAll()方法,前提还是需要手动 new ArrayList ArrayList<String> s = new Arr ...

  6. 2018最新Python视频教程

    基础+就业Python视频教程需要的加我q:1139721002备注来意

  7. zabbix AGENTS 在WINDOWS的安装

    1.下载 https://assets.zabbix.com/downloads/3.4.0/zabbix_agents_3.4.0.win.zip 解压 zabbix_agents_3.4.0.wi ...

  8. 小学生噩梦——四则运算题库(python 全功能实现)

    Github: https://github.com/holidaysss 小组:龙天尧(代码实现),林毓植(浮点转分数函数,代码审查) PSP2.1 Personal Software Proces ...

  9. Adjacency matrix based Graph

    Interface AddVertex(T data) AddEdge(int from, int to) DFS BFS MST TopSort PrintGraph using System; u ...

  10. s21day23 python笔记

    s21day23 python笔记 一.内容回顾及补充 字符串格式化 %s # 示例一:特别注意:最后的右括号前面必须有逗号(,) msg = '我是%s,年龄%s'%('alex',19,) # 元 ...