这几天在项目需求里面遇到了很多之前没做过的需求，也慢慢更加认识到了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. Tomcat配置及不依赖IDEA部署web应用

    http:tomcat.apache.org 下载tomcat文件包 我使用的tomcat9的版本 Tomcat9014使用的是Servlet4.0 解压即可,目录如下 bin :启动和关闭tomca ...

  2. bottle模板中的替换

    line是模板中一行的内容,类似: {{x}}testinfo{{x+10}} x=10时,模板输出: 10testinfo20 x = 10 splits = re.split(r'\{\{(.*? ...

  3. 牛客网小a的旅行计划

    地址:https://ac.nowcoder.com/acm/contest/223/B 此题是一道套公式题目,不难,ans=(pow(4,n+1)-4*pow(3,n+1)+6*pow(2,n+1) ...

  4. 一个简单的java程序，用于RabbitMQ日志监控

    RabbitMQ的所有日志,都会发给topic类型的exchange “amq.rabbitmq.log”  routingKey 有 debug,info,waring,error.  如果接收所有 ...

  5. Java学习NO.2

    这是我学习Java的第二天 学习内容: 一.运算符 赋值运算符  语法:变量名=表达式 算数运算符  +  -  *  /  %  ++  --   +=  -=  *=  /=  %= 其中尤为要注 ...

  6. win7 安装用mingw编译的Qt源码并连接postgresql

    下载Qt 1.下载qt-creator-windows-opensource-2.8.0,下载路径:http://download.qt.io/official_releases/qtcreator/ ...

  7. Python帮助

    我们可以很容易的通过Python解释器获取帮助.如果想知道一个对象(object)更多的信息,那么可以调用help(object)!另外还有一些有用的方法,dir(object)会显示该对象的大部分相 ...

  8. 利用arcgis和envi对卫星图像按城市进行拼接，分割

    1.首先在envi中打开多波段原素材,右键点击另存为TIFF,输入保存的路径将原素材转换为tif格式图片. 2.之后打开arcgis,导入全国地区界数据,点击工具栏中的筛选工具. 输入查找的范围以及匹 ...

  9. pytorch怎么抽取中间的特征或者梯度

    for i, (input, target) in enumerate(trainloader): # measure data loading time data_time.update(time. ...

  10. oo第四次博客

    一.测试与正确性论证比较 正确性论证是论证程序达到预期目的的一般性陈述,而该论证与程序输入数据的特定值无关,能够代表穷举性测试. 程序测试是指测试者特意跳出一批输入数据,通过运行程序,检查每个输入数据 ...