css3现在越来越普及了。给我们前端人员也带来了极大的便利。以前要实现让溢出的内容显示省略号还得通过js实现，现在完全可以用css代替之。

主要的代码如下：

<style type="text/css"> .test{-o-text-overflow:ellipsis;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:150px;} </style>

<p class="test">显示不出用省略号显示不出用省略号显示不出用省略号显示不出用省略号</p>

显示效果如下：
这个属性并须要与overflow:hidden;white-space:nowrap;width:150px;一起用才会有效果！！

对于单行的我们可以用text-overflow:ellipsis;来实现，那对于多行有，有什么办法吗？？当然有！巨人的肩膀很结实的说。。

duang~duang~duang~欢迎我们的多行用省略号的方法隆重登场！

-webkit-line-clamp：***

为毛要用“-webkit-”，因为，它是一个不规范的属性，它没有出现在 CSS 规范草案中。所以，尽量只在移动端使或在WebKit浏览器用它吧。后面的***就是表示你想显示的行数，如果你想显示两行，就是2。用它的时候，还需要用到其他的webkit属性。要实现这样的效果的全部代码应该是：

对于更多实现让溢出内容显示省略号的方法大家可以移步至张鑫旭博客，访问如下链接即可：关于文字内容溢出用点点点(…)省略号表示

用css3让溢出内容显示省略号的更多相关文章

  1. CSS 单行溢出文本显示省略号...的方法（兼容IE FF）（转）

    http://www.52css.com/article.asp?id=602 ===================================================     html ...

  2. 新公司入职第一天遇到的 关于 CSS 单行溢出文本显示省略号...的问题

    上班第一天 前端岗位,因为公司这个项目是标准开发 所以没法用框架在打架页面,好吧 我手写 各种div 各种css样式 好不忧伤,好吧 不废话了 进入正题. 想在导航栏中的 客户信息 功能点 实现溢出用 ...

  3. css 溢出文本显示省略号

    这个标题其实已经是一个老生常谈的问题了.很多时候,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没有这么宽,这时候最正常的做法就是 让超出宽度的部分文字用省略号(…)来表示.通常做法是网 ...

  4. 使用text-overflow:ellipsis对溢出文本显示省略号有两个好处

    使用text-overflow:ellipsis对溢出文本显示省略号有两个好处,一是不用通过程序限定字数:二是有利于SEO.需要使用对对溢出文本显示省略号的通常是文章标题列表,这样处理对搜索引擎更友好 ...

  5. text-overflow:ellipsis ，溢出文本显示省略号

    text-overflow:ellipsis 对溢出文本显示省略号有两个好处, 一是不用通过程序限定字数 二是有利于SEO. 需要使用对对溢出文本显示省略号的通常是文章标题列表,这样处理对搜索引擎更友 ...

  6. HTML技巧篇：如何让单行文本以及多行文本溢出时显示省略号(…)

    参考:https://baijiahao.baidu.com/s?id=1621362934713048315&wfr=spider&for=pc 本篇文章主要给大家介绍一下在html ...

  7. css text-overflow溢出文本显示省略号

    <div style="width: 100px; overflow: hidden; text-overflow:ellipsis"> <nobr>当对象 ...

  8. css文本溢出隐藏显示省略号（单行+多行）

    文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     ove ...

  9. css文本内容显示省略号

    文字显示省略号width: 4.5rem;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; 但是这个属性只支持单行文本的溢出显 ...

随机推荐

  1. Apache和Tomcat区别

    Apache 和 Tomcat 都是web网络服务器,两者既有联系又有区别,在进行HTML.PHP.JSP.Perl等开发过程中,需要准确掌握其各自特点,选择最佳的服务器配置.Apache是web服务 ...

  2. Java—FileOperator

    //基本用法 JFileChooser jfc = new JFileChooser(); int result = jfc.showOpenDialog(this); if(result != JF ...

  3. ie6-ie8中不支持opacity透明度的解决方法

    ie6-ie8中是不支持的,需要加上下面这句话:filter: alpha(opacity=70);此外这种效果不能用ietester中的ie6测试,因为ietester的ie6这样写也是不透明的,但 ...

  4. C语言操作文件

    #include <stdio.h> struct stu{ ]; int num; int age; ]; }boya[],boyb[]; struct stu *pa,*pb; mai ...

  5. java工程中的.classpath<转载>

    第一部分:classpath是系统的环境变量,就是说JVM加载类的时候要按这个路径下去找,当然这个路径下可以有jar包,那么就是jar包里所有的class. eclipse build path是ec ...

  6. Java:对象的强、软、弱和虚引用

    1．对象的强.软.弱和虚引用 在JDK 1.2以前的版本中,若一个对象不被任何变量引用,那么程序就无法再使用这个对象.也就是说,只有对象处于可触及(reachable)状态,程序才能使用它.从JDK ...

  7. unix环境高级编程基础知识之第二篇（3）

    看了unix环境高级编程第三章,把代码也都自己敲了一遍,另主要讲解了一些IO函数,read/write/fseek/fcntl:这里主要是c函数,比较容易,看多了就熟悉了.对fcntl函数讲解比较到位 ...

  8. c#新语法学习笔记

    1.匿名类 匿名类编译之后会生成一个具体的泛型类,匿名类的属性是只读的.在临时数据传递时非常方便(linq查询).匿名类中不能有方法.数据传输(json),数据查询(linq) }; 2.匿名方法匿名 ...

  9. 【开源】LLMAnimator 60多种动画让你的应用动起来

    github:  https://github.com/brookshi/LLMAnimator ,欢迎star/fork 之前做android的时候需要给应用加些动画效果,在github上找到这个库 ...

  10. js中什么时候回考虑用call或者apply

    这里我说出自己的浅薄的理解,希望大家可以共鸣! call一些装逼的用法: call的用法通常在两个地方会用到, 1.需要加一个层的时候,也可以不准确的说继承的时候,继承是继承父类的属性或者方法,而ao ...