css 多行超长点点点
超长?
不是很好吗?
不好?
什么?
有什么坏处吗?
会使人想哭的!
这里来说下,超长点点点的处理:
一行超长点点点,这个很多都会吧!
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 多行超长点点点的更多相关文章
- css多行显示省略号
首先说css多行显示省略号和单行文本省略号: 我们知道,单行显示省略号时,我们首先需要设置容器的宽度width:value(具体的值),然后强制文本在一行内显示,即white-spacing:nowr ...
- CSS设置行内元素和块级元素的水平居中、垂直居中
CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...
- CSS实现DIV超长截断,并显示...
DIV显示内容有时会超长,并把页面撑的很难看, 以前的做法是在JS中,或者后台判断其长度,过长就截断, 但由于中英文数字展示的宽度并不一样,截断的长度也就只能取最小值, 展示的效果也不好.利用CSS提 ...
- 深入了解css的行高Line Height属性
什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...
- 行内脚本的位置放置----css阻塞行内脚本
行内脚本:避免放置在css和其他资源之间. 若在head中,最好放在css样式表之前,如果放置在样式表之后,会引起css阻塞. css阻塞:由于浏览器要保证css和JavaScript的执行顺序,cs ...
- css多行省略
单行省略就不用说了,用css实现非常简单,兼容性还非常好.但是多行省略一直都是前端的痛点,在css3之前,可以用js去算两行能放多少个字,把多余的字用 ... 代替,且不说好不好,万一哪天PM说要改成 ...
- CSS多行文字垂直居中的两种方法
之前写过一篇关于:CSS左右居中对齐的文章,里面提到的两种方法其实也可以引申为垂直居中对齐.写这篇文章是因为要兼容IE6.IE7的问题,我们都知道一行文字时可以通过line-height来设置垂直居中 ...
- 三种CSS方法实现loadingh点点点的效果
我们在提交数据的时候,在开始提交数据与数据提交成功之间会有一段时间间隔,为了有更好的用户体验,我们可以在这个时间段添加一个那处点点点的动画,如下图所示: 汇总了一下实现这种效果主要有三种方法: 第一种 ...
- css实现行内文字垂直居中
之前本人一直使用浮动.相对定位.绝对定位和display:table等css的方法进行定位.网上得知flex可实现弹性布局,符合未来发展趋势,随尝试. 1:让盒子行内文字垂直居中,解决思路是讲文字的行 ...
随机推荐
- 从头开始搭建一个Spring boot+RabbitMQ环境
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
- phpcmsV9静态页面替换动态步骤
1.先在www目录下找到 phpcms + install_package + phpcms + templates在templates 文件夹里创建个自己的文件夹我弄得是 ceshi 文件夹,在 c ...
- python的解释器spython介绍
Python解释器spython介绍 简介 出于个人爱好和某种需求,我再16年对python的解释器产生了浓厚兴趣,并且下定决心重新实现一个版本.我个人再游戏服务器开发中,对c++嵌入lua和pyth ...
- webpack性能优化——DLL
Webpack性能优化的方式有很多种,本文之所以将 dll 单独讲解,是因为 dll 是一种最简单粗暴并且极其有效的优化方式. 在通常的打包过程中,你所引用的诸如:jquery.bootstrap.r ...
- 学习接水系统(java+thread线程)
(一)项目框架分析 对于学生并发接水项目,根据面向对象的思想,需要创建两个对象,即学生和水龙头. 接下来主要讲解不排队接水和排队接水两张情况. 项目的目录文件如下: (二)不排队接水 假设有四个学生小 ...
- CSS下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- loadrunner入门篇-Vuser发生器
Vuser 发生器(Visual User Generator,VuGen),主要通过捕获客户端向服务器发送的HTTP请求,将这些请求录制成脚本,在回放时将捕获的HTTP请求再次发送,以达到模拟客户行 ...
- 一道面试题引发的对javascript类型转换的思考
最近群里有人发了下面这题:实现一个函数,运算结果可以满足如下预期结果: add(1)(2) // 3 add(1, 2, 3)(10) // 16 add(1)(2)(3)(4)(5) // 15 对 ...
- HttpClient filter中间转发从A tomcat转发至B tomcat
BackFilter.java 主要解决基于HttpGet/HttpPost以及基于HttpPost的附件流转发import java.io.IOException; import java.io.I ...
- ajax基础部分
今天讲了ajax的组成及使用方法:首先我们看看一个简单的ajax的例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...