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 。

喜欢的朋友可以点点关注。鼓励作者出多点更好的干货!   
时间: 2024-11-02 08:55:32

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

div css每行文字显示一半 同时文字字体重叠显示不全解决方法

CSS DIV布局中出现单行或多行文字的每行文字内容不能显示全,上下行文字有一点点重叠现象,文字字体只显示一半解决方法,在低版本IE特别明显文字字体显示不全,在谷歌浏览器等高版本IE浏览器测试还好些. 新手布局时候特别爱出现DIV盒子里文字字体显示不完整,音乐沙发甚至上下行文字有一点重叠现象. css字体文字重叠显示不完整重叠字体字体文字重叠显示不完整同时有重叠重合效果截图 在DIV+CSS布局中造成这种字体显示不全,音乐沙发显示一半同时多行文字有一点点重叠情况原因:css行高小于CSS字体大小

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

CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-height:30px} /*DIV内的行内元素均会垂直居中*/ PS:当然,如果既要水平居中又要垂直居中,那么综合一下 div{text-align:center; height:30px; line-height:30px} CSS设置块级元素的水平居中 div p{margin:0 auto; widt

CSS line-height行高上下居中垂直居中样式属性

DIV CSS line-height行高上下居中属性教程篇常常使用line-height设置内容(图片.文字)行高上下居中样式效果.行高line-height目录(音乐放松椅)line-height行高语法行高应用line-height案例line-height总结一.line-height行高语法 - TOP line-height:22pxdiv{line-height:22px} linet-height样式属性解析图(音乐放松椅)line-height:+数字+单位(在CSS布局中我们

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

DIV显示内容有时会超长,并把页面撑的很难看, 以前的做法是在JS中,或者后台判断其长度,过长就截断, 但由于中英文数字展示的宽度并不一样,截断的长度也就只能取最小值, 展示的效果也不好.利用CSS提供的方法,可以完美的解决该问题. 1 .project-Name{ 2 width:280px; 3 overflow:hidden; 4 text-overflow:ellipsis; 5 white-space: nowrap; 6 } 这里宽度是必须定义的, overflow:hidden;表

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

行内脚本:避免放置在css和其他资源之间. 若在head中,最好放在css样式表之前,如果放置在样式表之后,会引起css阻塞. css阻塞:由于浏览器要保证css和JavaScript的执行顺序,css之后如果有js,浏览器会先等待css下载执行完毕,再去执行这部分行内的js脚本(这是因为行内脚本可能含有依赖样式表中的样式),而脚本的执行也会阻塞后续资源的加载,从而出现css阻塞.所以,一般要将行内脚本放在css之前.这样css就可以和其他资源并行下载了,不会出现阻塞现象.

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

来源:http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html 什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. 不过,行间距与半行间距,还是取决于CSS中的line-height.那么,如何来使用line-height呢? 默认状态,浏览器使用1.0-1.2 line-

css 多行文字超出部分省略号 一行文字超出部分省略号

1.  <!-- 多行文字超出宽度部分省略号: 显示文字行数 隐藏多余的 文本多余显示省略号text-overflow:ellipsis)--> html: <div class="con" > <div id="div1" > 1 hello world!这是我内容的超出三行省略号显示!2hello world!这是我内容的超出三行省略号显示!3hello world!这是我内容的超出三行省略号显示! </div>

css的行内和块的转变、选择器等

css选择器 id=''id名'':    #id  名页面中只有一个唯一的id名 class="类名"   .类名  可以有多个相同的class 包含选择器 如:<div> <p> <span> </span> </p> </div> 书写方式:div p span{ } 便签选择器 <p> </p> 书写方式:p{ } 群组选择器  p,h5,span{ }  中间用逗号隔开 优先级问题

CSS多行溢出隐藏,webpack打包删除代码 -webkit-box-orient: vertical;

文本多行溢出隐藏显示省略号,本地显示正常,打包后线上代码丢失,-webkit-box-orient: vertical; /*! autoprefixer: off */ -webkit-box-orient:vertical; /*! autoprefixer: on */ 解决方式 1 :使用autoprefixer 跳过webpack的css打包. 解决方法 2 : 待补充 原文地址:https://www.cnblogs.com/lishengye/p/10990248.html