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:让盒子行内文字垂直居中,解决思路是讲文字的行 ...
随机推荐
- bootstrap 预定义样式风格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- SharePoint 2016 配置应用程序商店
最近碰到一个新的需求,就是要给SharePoint配置应用程序商店,挺有意思的,就简单的配置和记录了一下,分享给大家. 其实应用程序商店之前感觉很鸡肋,但是用起来还是不错的.不喜勿喷,呵呵. 首先需要 ...
- vue生命周期的介绍
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 单线程JavaScript
最近在阅读<你不知道的JavaScript中卷>,当我看到第二部分介绍异步和回调函数的一些知识时,由于该书在第二部分1.2章对线程.事件循环的概念介绍的并非详细,因此引发了我的一系列思考. ...
- maven引用net.sf.json-lib
json-lib提供了两个jdk版本的实现, json-lib-2.1-jdk13.jar和json-lib-2.1-jdk15.jar <dependency> <gro ...
- RancherOS 学习笔记(一)
今天只是简单了解下rancheros,以及尝试安装了下. 这是官网文档:http://docs.rancher.com/os/ 这是官网Github地址:https://github.com/ranc ...
- ABP 学习汇总
本文背景 公司最近规划的新框架准备基于ABP来搭建,自从在阳铭博客看到ABP框架的介绍后,就一直持续关注着,但还没真正在实际项目中直接使用ABP,只是自己做了一些学习和Demo.ABP所用到的一些新技 ...
- “使用多target来构建大量相似App”,唐巧大神理论验证(附工程代码地址)
无意间看到巧神的文章时,感觉非常兴奋,此文章正好解决了公司目前项目的痛点. 读到以下关键一段时,不甚明了,故自己做了实验分享给有缘人. "我们的每个课程的资源文件都具有相同的文件名,例如首页 ...
- 关于使用微信js上传图片 笔记
微信js初始化时需要签名,先获取签名(java代码): 1.获取jsapi_ticket,此数据自己保存,有效时长为7200秒 private String getJsticket(String to ...
- 转换器2:ThinkPhp模板转Django模板
前天写了个<ThinkPhp模板转Flask模板> 居然被同事鄙视了,原因是他用Django,我用Flask,为了避免被他继续安利Django的强大.我决定写一个Django模板转换器. ...