超长?

不是很好吗?

不好?

什么?

有什么坏处吗?

会使人想哭的!

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

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

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. BZOJ 4089:[Sdoi2015]graft(SDOI 2015 Round 2 Day 2)

    别人家的神选系列,我只会做这道题QAQ 题目描述: 给定一颗树,加上k条边,将n个点染色,相邻两点不同,记颜色为i的又ti个,求$$\frac{\sum_{i=1}^{n} \frac{ti}{i}} ...

  2. JAVA三大特性之三——多态

    作为JAVA的三大特性之一,多态性是很多人都没有弄清楚的一个重要特性,今天我就来从我所理解的角度来说一下. 首先,从他的字面意思来理解,多态,从其字面来理解就是多种形态,多种表现形式.根据这些,我最能 ...

  3. HP DL388 gen9服务器安装RHEL 6.5系统

    测试: 1.默认UEFI模式,F10下智能安装,如果选择自己划分分区,进入该选项后会看到系统自动就帮我们创建了一个/efi 的500M分区,一开始我就是被这个分区坑了的,要知道服务每次重启都要等很久的 ...

  4. SQLHelper帮助类_下(支持多数据库的封装)

    在上篇关于SQLHelper类中,主要针对SQLServer数据库进行的.在使用别的数据库,就要修改部分代码!所以今天就写一个支持多数据库的封装!主要用到枚举,读取config文件!接口的简单用法.获 ...

  5. Git如何检出指定目录或文件

    系统版本:Window 10,Git 版本:2.7.1 对于大型 Git 仓库,每次执行 Git 命令,都需要经过漫长的等待,特别是要经常执行的 git status 命令.下面是一个例子... 从 ...

  6. Oracle 字符集设置

    因为装Linux系统时选择的是英文版,所以当需要测试中文数据库时会出现乱码,这里记录一下我修改字符集的操作. 一些命令: 1.查看sqlplus客户编码: $ echo  $NLS_LANG 2.查看 ...

  7. iOS集成ApplePay

    Apple Pay正式在国内上线的那天,一起工作的小伙伴就走进了Starbucks,7-11等带有银联闪付的店进行了尝鲜.不管是否要再次输入一次密码,但是它的出现确实给我们带来了极大的便捷.下面就尝试 ...

  8. Prince2是怎么考试的?想了解P2

    自己在项目管理培训的行业已经有了5年的时间,经历了很多的学员和企业,和他们交流的问题,话题也很多. 在前几年,对于项目经理来讲关注的很多是单项目管理的工具技术模板,谈论最多的是,进度延期,成本超支,范 ...

  9. Java中整形、浮点、字符之间的转换

    如:String s = "123";int num = Integer.parseInt(s);注意:当应用程序试图将字符串转换成一种数值类型,但该字符串不能转换为适当格式时,会 ...

  10. Redis命令总结及其基础知识讲述

    1.redis的不同之处 Redis拥有其他数据库不具备的数据结构,又拥有内存存储(这使得redis的速度非常快),远程操作(使得redis可以与多个客户端和服务器进行连接).持久化(使得服务器可以在 ...