超长?

不是很好吗?

不好?

什么?

有什么坏处吗?

会使人想哭的!

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

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

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. Frogs

    Problem Description There are m stones lying on a circle, and n frogs are jumping over them.The ston ...

  2. BZOJ 3479: [Usaco2014 Mar]Watering the Fields(最小生成树)

    这个= =最近刷的都是水题啊QAQ 排除掉不可能的边然后就最小生成树就行了= = CODE: #include<cstdio>#include<iostream>#includ ...

  3. java_获取多个文件夹下所有.java源码的总行数

    import java.io.BufferedReader;import java.io.File;import java.io.FileReader;import java.io.IOExcepti ...

  4. 微信内置浏览器私有接口WinXinJsBridge介绍

    关于微信内置浏览器私有接口WeiXinJsBridge,只是之前接触过的一个微信公众号项目中遇到过,不过并没有深入研究过,可以说并没有了解过... 刚好今天无意中看到了这方面的知识,就补习一下,弥补一 ...

  5. HTTP基础知识(一)

    一.了解web及网络基础 1.通过发送请求获取服务器资源的web浏览器等的都可称为客户端(client) 2.HTTP:HyperText Transfer Protocol,超文本传输协议:所有的W ...

  6. nginx配置参数详解

    配置参数详解 user nginx nginx ; Nginx用户及组:用户 组.window下不指定 worker_processes 8; 工作进程:数目.根据硬件调整,通常等于CPU数量或者2倍 ...

  7. angularjs+ionic注册页面表单验证(手机号、确认密码、60s后重发验证码)

    在已建立tabs和路由的注册页面html: 功能: 进行了手机号.密码格式验证,两次密码输入是否相同的判断,都正确且复选框勾选后才可点击注册,进入tabs.mypage页面. 未进行验证码真正发送.获 ...

  8. spring源码浅析——IOC

    =========================================== 原文链接: spring源码浅析--IOC   转载请注明出处! ======================= ...

  9. 【WCF】错误处理(一):FaultException 与 FaultReason 的搭配

    这里所说的错误处理主要是指服务代码中抛出的异常,即开发人员主动抛出的错误当然,由于网络问题或者配置不正确,会引发连接超时的错误,但这里老周要说的是,我们在实现服务逻辑时主动抛出的异常,尤其是对客户端传 ...

  10. php调去存储过程

    第一步,mysql端建存储过程 DELIMITER $$create procedure mintime()beginselect min(year(htime)) as minnian,max(ye ...