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. SpringMVC讲解

    2.1.Spring Web MVC是什么 Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职 ...

  2. jsp前三章测试改错题

      (选择一项) A: B: C: D: 正确答案是 B ,B/S架构并不是C/S架构的替代品,有些程序例如大型的网络游戏一般使用的是C/S架构. (选择多项) A: B: C: D: 正确答案是 A ...

  3. Xcode 编译的哪些错误

    1.error: macro names must be identifiers YourProject_prefix.pch 原因: 因为你弄脏了预处理器宏,在它处于<Multiple Val ...

  4. sublime安装package control组件

    第一步,首先到这个网站https://packagecontrol.io/installation去下载Package Control.sublime-package文件 第二步,将下载的文件放到C: ...

  5. checkbox与jq<转>2

    jQuery中attr()解决checked属性问题 作者:u012885111 这两天在做一个表单提交,其中就包含有checkbox的全选和反选,这是最先开始做出来的版本,代码如下: <inp ...

  6. BZOJ 1588: [HNOI2002]营业额统计

    1588: [HNOI2002]营业额统计 Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 14396  Solved: 5521[Submit][Sta ...

  7. DEDECMS之四 栏目调用

    一.内容页调用 {dede:type} <a href=" [field:typelink /] "> [field:typename/] </a> {/d ...

  8. BZOJ 4241 历史研究

    Description IOI国历史研究的第一人——JOI教授,最近获得了一份被认为是古代IOI国的住民写下的日记.JOI教授为了通过这份日记来研究古代IOI国的生活,开始着手调查日记中记载的事件. ...

  9. HDU2255-奔小康赚大钱-二分图最大权值匹配-KM算法

    二分图最大权值匹配问题.用KM算法. 最小权值的时候把权值设置成相反数 /*-------------------------------------------------------------- ...

  10. Theano2.1.10-基础知识之循环

    来自:http://deeplearning.net/software/theano/tutorial/loop.html loop 一.Scan 一个递归的通常的形式,可以用来作为循环语句. 约间和 ...