超长?

不是很好吗?

不好?

什么?

有什么坏处吗?

会使人想哭的!

这里来说下,超长点点点的处理:

一行超长点点点,这个很多都会吧!

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

那多行呢?不会了吧,上代码:

overflow: hidden;
display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示 。
text-overflow: ellipsis; // 可以用来多行文本的情况下,用省略号“...”隐藏超出范围的文本 。
-webkit-box-orient: vertical; // 设置或检索伸缩盒对象的子元素的排列方式 。
-webkit-line-clamp: 2; // 限制在一个块元素显示的文本的行数。

如果文本很多行的,你想在 n 行的时候超长了就点点点, 那 -webkit-line-clamp 就设置为 n 。

喜欢的朋友可以点点关注。鼓励作者出多点更好的干货!

css 多行超长点点点的更多相关文章

  1. css多行显示省略号

    首先说css多行显示省略号和单行文本省略号: 我们知道,单行显示省略号时,我们首先需要设置容器的宽度width:value(具体的值),然后强制文本在一行内显示,即white-spacing:nowr ...

  2. CSS设置行内元素和块级元素的水平居中、垂直居中

    CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...

  3. CSS实现DIV超长截断,并显示...

    DIV显示内容有时会超长,并把页面撑的很难看, 以前的做法是在JS中,或者后台判断其长度,过长就截断, 但由于中英文数字展示的宽度并不一样,截断的长度也就只能取最小值, 展示的效果也不好.利用CSS提 ...

  4. 深入了解css的行高Line Height属性

    什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...

  5. 行内脚本的位置放置----css阻塞行内脚本

    行内脚本:避免放置在css和其他资源之间. 若在head中,最好放在css样式表之前,如果放置在样式表之后,会引起css阻塞. css阻塞:由于浏览器要保证css和JavaScript的执行顺序,cs ...

  6. css多行省略

    单行省略就不用说了,用css实现非常简单,兼容性还非常好.但是多行省略一直都是前端的痛点,在css3之前,可以用js去算两行能放多少个字,把多余的字用 ... 代替,且不说好不好,万一哪天PM说要改成 ...

  7. CSS多行文字垂直居中的两种方法

    之前写过一篇关于:CSS左右居中对齐的文章,里面提到的两种方法其实也可以引申为垂直居中对齐.写这篇文章是因为要兼容IE6.IE7的问题,我们都知道一行文字时可以通过line-height来设置垂直居中 ...

  8. 三种CSS方法实现loadingh点点点的效果

    我们在提交数据的时候,在开始提交数据与数据提交成功之间会有一段时间间隔,为了有更好的用户体验,我们可以在这个时间段添加一个那处点点点的动画,如下图所示: 汇总了一下实现这种效果主要有三种方法: 第一种 ...

  9. css实现行内文字垂直居中

    之前本人一直使用浮动.相对定位.绝对定位和display:table等css的方法进行定位.网上得知flex可实现弹性布局,符合未来发展趋势,随尝试. 1:让盒子行内文字垂直居中,解决思路是讲文字的行 ...

随机推荐

  1. android开发过程中踩过的坑

    1) 4.X下 viewgroup 不一定会向下传递requestLayout,当onlayout的速度比较慢(比如子View比较复杂之类的原因),系统会跳帧!此时子View下层的view可能就不会再 ...

  2. 【译文】用Spring Cloud和Docker搭建微服务平台

    by Kenny Bastani Sunday, July 12, 2015 转自:http://www.kennybastani.com/2015/07/spring-cloud-docker-mi ...

  3. Redis从入门到精通

    什么是Redis? Redis是非关系型数据库,是一个高性能的key-value数据库,它是开源的,更是免费的. Redis能做什么? 存储数据 Redis的优点有哪些? 1.它支持存储丰富的数据类型 ...

  4. HTML5培训哪里靠谱

    兄弟连IT培训教育,是学科最全的IT培训机构,涵盖HTML5培训.等学科,并是业内推出真实千万级服务器架构课程的唯一培训学校.兄弟连已分别在北京.上海.广州.沈阳.郑州.济南.成都.杭州.南京.南宁. ...

  5. ERP顾问工作中应该注意哪些工作是不该做的

    1.不要轻易对客户说“不“ 当客户提出一个问题顾问要判断一下,是否属于顾问实施的问题,如果属于顾问实施范畴,而自己又不清楚,这时应把问题纪录下来,和客户解释清楚,回去请教资深顾问给与回答,如果该问题不 ...

  6. 配置虚拟主机(windows环境下nginx+php)

    需要给一个ip绑定不同域名,例如有两个项目/www/,/www2/ 需要http://a.com时访问的是www 项目 http://b.com访问的是www2项目   那么需要在nginx/conf ...

  7. 在.NET项目中使用PostSharp,使用CacheManager实现多种缓存框架的处理

    在前面几篇随笔中,介绍了PostSharp的使用,以及整合MemoryCache,<在.NET项目中使用PostSharp,实现AOP面向切面编程处理>.<在.NET项目中使用Pos ...

  8. Vue学习之路---No.5(分享心得,欢迎批评指正)

    同样,首先我们还是回顾一下昨天讲到的东西: 1.常用的Vue修饰器 2.当利用js方法不修改数据,但也可以改变视图时,我们需要整体返回再整体接收 (如: items.example1 = items. ...

  9. Vuex 模块化实现待办事项的状态管理

    前言 在vue里,组件之间的作用域是独立的,父组件跟子组件之间的通讯可以通过prop属性来传参,但是在兄弟组件之间通讯就比较麻烦了.比如A组件要告诉一件事给B组件,那么A就要先告诉他们的爸组件,然后爸 ...

  10. 关于极光推送在手机系统低于iOS10的手机上闪退的问题。

    最近项目中用到了极光推送,升级到了最新的SDK 2.1.9版本,发现只能在iOS10 上运行,其他测试的时候真机闪退.贴上一个可能的原因: