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. 利用T-Sql语句中的二重循环打印乘法口诀表

    --定义三个初始化变量 declare @a int,@b int,@c varchar(200) --对@a进行赋值 set @a=1 --循环输出9次,@a为被乘数 while(@a<=9) ...

  2. js中控制小数点的显示位数的技术整理

    js中自带方法控制小数点的显示位数(四舍五入) alert((12.9299).toFixed(2)); //12.93 alert((12.9243).toFixed(2)); //12.92 小数 ...

  3. PHP用户注册邮箱验证激活帐号

    我们在很多网站注册会员时,注册完成后,系统会自动向用户的邮箱发送一封邮件,这封邮件的内容就是一个URL链接,用户需要点击打开这个链接才能激活之前在该网站注册的帐号.激活成功后才能正常使用会员功能. 本 ...

  4. css position, display, float 内联元素、块级元素

    position属性:position属性指出一个元素的定位方法.有4种可能值:static, relative, absolute or fixed: static:默认值,元素按照在文档流中出现的 ...

  5. SQL2012删除作业失败的处理

    修改msdb数据库中的过程sp_delete_job,如下: USE [msdb] GO /****** Object: StoredProcedure [dbo].[sp_delete_job] S ...

  6. SQL Server 用SSMS查看依赖关系有时候不准确,改用代码查

    SQL Server 用SSMS查看依赖关系有时候不准确,明明某个sp中有用到表tohen,查看表tohen的依赖关系的时候,却看不到这个sp 用代码查看方式如下: --依赖于表tohen的对象 SE ...

  7. mac上开启ftp

    开启 sudo -s launchctl load -w /System/Library/LaunchDaemons/ftp.plist 关闭 sudo -s launchctl unload -w ...

  8. RSA签名验签学习笔记

    RSA私钥签名时要基于某个HASH算法,比如MD5或者SHA1等.之前我一直认为签名的过程是:先对明文做HASH计算,然后用私钥直接对HASH值加密.最近才发现不是那么简单,需要对HASH后的数据进行 ...

  9. .NET MVC HtmlHepler

    一.HtmlHepler 1.ActionLink() 动态生成 超链接:根据路由规则,生成对应的 html 代码. //1.注册路由信息 routes.MapRoute( name: "D ...

  10. 你能熟练使用Dictionary字典和List列表吗?(转)

    命名空间System.Collections.Generic中有两个非常重要,而且常用的泛型集合类,它们分别是Dictionary<TKey,TValue>字典和List<T> ...