CSS多行文字截断

【CSS多行文字截断】的更多相关文章

有时候容器的宽度是固定的,但要显示的文字有点多,就需要将多余的文字隐藏,而且为了表示还有字没有显示,用省略号表示. 类似这样: 单行文字单行文字截断比较明显: .truncate { width: 250px; /* or max-width */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 多行文字多行文字截断就比较棘手,比如对于下面的代码段: <div class="module"&g…

CSS多行文字垂直居中的两种方法

之前写过一篇关于:CSS左右居中对齐的文章,里面提到的两种方法其实也可以引申为垂直居中对齐.写这篇文章是因为要兼容IE6.IE7的问题,我们都知道一行文字时可以通过line-height来设置垂直居中,如果是多行这个肯定不行,而我的同事因为这个用了js来实现居中对齐,我觉得这是很难理解的.故而整理这篇文章. HTML代码: <div class="middle-box"> <div class="middle-inner"> <p>…

CSS多行文字超出隐藏加省略号

overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 限制行数 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;…

css 多行文字，超出部分隐藏，...代替

css虽然简单,但其实也是记得常用的那些,不常用的还是要搜一搜再写…

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

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

div+css使多行文字垂直居中?

1.单行文字: 设置height = line-height; 多行文字: 设置 padding, 自己要计算一下? vertical-align: 可以设置垂直居中, 但是只是针对本身就具有 align属性的 table. 所以, 要使div中的内容垂直居中, 可以让div 模拟表格的属性就好了: 需要设置的css有两个: 一个是: 外部的 div#wrap{ display: table; } 这个外部的包裹容器要设置为 : display: table, 模拟一个表格; 因此, 第二…

单行文字溢出和多行文字溢出省略号显示的CSS样式

单行文字溢出,CSS样式 <h6 style="width:70px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">{$vo.title}</h6> 多行文字溢出,CSS样式 <p style="width:360px;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:…

CSS实现多行文字限制显示

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> <meta…

css实现多行文字限制显示&编译失效解决方案

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> <meta…

css 一行或多行文字溢出以...的形式隐藏

一行文字溢出以...形式隐藏我需要隐藏... css代码如下: white-space:nowrap; text-overflow:ellipsis; overflow:hidden; 多行文字溢出以...形式隐藏(针对webkit内核浏览器) css代码如下: display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; 注意!-webkit-line-clamp:2; 这是2…