关于多行文字,溢出省略的问题

单行大家都懂,

多行的话用以下代码即可

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

时间： 2024-08-02 15:11:08

关于多行文字,溢出省略的问题的相关文章

单行和多行文字溢出省略

.text-ellipsis /* { 单行文字溢出省略 */ overflow: hidden; /* 溢出隐藏 */ text-overflow: ellipsis; /* 文字溢出省略 */ white-space: nowrap; /* 文字不换行 */ } .multiline-ellipsis { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webki

单行多行文字溢出显示省略号

1. 单行文字 <div class='line'>我是单行文字测试我是单行文字测试我是单行文字测试我是单行文字测试</div> .line{ width:200px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; } white-space:nowrap; (强制显示一行)overflow:hidden; (文字超出部分隐藏)text-overflow:ellipsis; (文字超出部分显示省略号)

多行文字溢出点点点的3中实现方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ font: 14px/22px "Microsoft Yahei"; } p{ width: 300px; margin: 50px auto; } .test1{

-webkit-line-clamp下多行文字溢出点点点...

限制在一个块元素显示的文本的行数. -webkit-line-clamp 是一个不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中. 为了实现该效果,它需要组合其他外来的WebKit属性.常见结合属性: display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 . -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 . text-overflow,可以用来多行文

多行文字超出省略显示

.ellipsis-1{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;word-break:break-all} .ellipsis-1{-webkit-line-clamp:1}

文字溢出省略

.txt{font-size: 12px;color: #666666;width:170px;height:2.8em;line-height:1.4em;position:relative;overflow:hidden;} .txt::after{content:"...";font-weight:bold;position:absolute;bottom:0;right:0;padding:0 20px 1px 45px;background:url(http://css88.

CSS实现单行与多行文字省略（truncation）

在上一篇文章小div布局之卡片堆叠(card-stacking)中有多行文字溢出省略的效果,这篇文章就对这种效果(包括单行文字溢出省略)的实现做个简单的记录,以防自己忘记.具体来说,就是要实现这种文字排布效果. html代码如下: 1 <div class="container"> 2 <div class="box"> 3 <div class="box-content"> 4 <h5 class=&q

文字溢出隐藏，隐藏的问字用省略号表示

之前在写页面的时候用的都是单行文字溢出隐藏,今天遇到了多行文字溢出隐藏,溢出部分用省略号.我通过查阅一些资料整理了一下,拿出来与大家分享一下. 单行文本的溢出隐藏对于单行文本溢出隐藏,text-overflow: ellipsis 就能完美的解决,不过在使用他时,一定要结合 overflow: hidden和 white-space: nowrap;,我有时就忘记写了,导致效果出不来,还让我找了半天. 1 <!DOCTYPE html> 2 <html> 3 <he

多行文字内容溢出显示点点点（...）省略号

1.常规css方法——使Firefox以外主流浏览器文字溢出省略号表示下图为此常用方法在各个浏览器下的表现: IE6浏览器下 IE7浏览器下 chrome谷歌浏览器下 Safari浏览器下 opera浏览器下 Firefox火狐浏览器下可以看到,仅在Firefox火狐浏览器下无法实现文字溢出省略号表示,其文字直接从中间咔掉了.综合考虑代码成本,表现效果,我个人觉得这样子已经算是不错的了,追求完美和实际效益之间要追求一定的平衡.如果页面上很多文字都溢出,则需要寻求更兼容的方法,要是偶尔会出现文