CSS实现单行与多行文字省略(truncation)
在上一篇文章小div布局之卡片堆叠(card-stacking)中有多行文字溢出省略的效果,这篇文章就对这种效果(包括单行文字溢出省略)的实现做个简单的记录,以防自己忘记。具体来说,就是要实现这种文字排布效果。
html代码如下:
1 <div class="container">
2 <div class="box">
3 <div class="box-content">
4 <h5 class="box-content-title">A公司</h5>
5 <div class="box-content-desc singleline">A公司是B公司的重要战略伙伴,致力于为C行业提供一站式 解决方案,目前处于高速发展期。公司旗下有四个事业部,业务主要涵盖以下三个方面,2016年公司 年营业额达到100万元。
6 </div>
7 <div class="box-content-desc multiline">A公司是B公司的重要战略伙伴,致力于为C行业提供一站式 解决方案,目前处于高速发展期。公司旗下有四个事业部,业务主要涵盖以下三个方面,2016年公司 年营业额达到100万元。
8 </div>
9 <a class="box-content-link" href="javascript:void(0);">查看 >></a>
10 </div>
11 </div>
12 </div>
通用的css样式如下:
1 .container {
2 margin: 50px auto;
3 width: 328px;
4 }
5
6 .box {
7 background: #f7f7f7;
8 }
9
10 .box-content {
11 padding: 20px;
12 }
13
14 .box-content-title {
15 margin: 0 0 20px;
16 }
17
18 .box-content-desc {
19 color: #333;
20 font-size: 14px;
21 line-height: 1.5;
22 margin-bottom: 10px;
23 overflow: hidden;
24 }
25
26 .box-content-link {
27 color: #006ec8;
28 font-size: 14px;
29 text-decoration: none;
30 }
注意上面的 overflow: hidden; 要保留。
单行文字溢出省略:
1 .singleline{
2 text-overflow: ellipsis;
3 white-space: nowrap;
4 }
text-overflow属性规定了如何显示溢出的文字内容,它的属性值可以是elipsis(...)、clip(截断)、自定义的字符串,我在chrome试了下,发现自定义字符串不好用。
再看多行文字溢出省略:
1 .multiline {
2 display: -webkit-box;
3 text-overflow: ellipsis;;
4 -webkit-box-orient: vertical;
5 -webkit-line-clamp: 4;
6 }
可以看到这里用到了不规范的css写法,即,带webkit前缀的写法(webkit内核浏览器私有属性),还有就是用到了一些过时的写法,
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
这里就不多解释了(其实是解释不明白),多行省略的方法不太好。以后再研究其他比较好的方法吧。
ps: 刚看到这篇文章多行文本溢出显示省略号(…)全攻略,讲了下比较靠谱的方法。汗呀,这才是专业的前端~
参考:
text-overflow
box-orient
line-clamp
CSS实现单行与多行文字省略(truncation)相关推荐
- 移动常见问题--H5标签之浏览器兼容性、JS之浏览器兼容性、CSS3之浏览器兼容性、移动端动画、click300ms延迟、单行和多行文字溢出省略、水平居中和垂直居中
1. H5标签之浏览器兼容性 在移动端时可以放心的使用h5相关的标签 但是如果需要兼容一些低版本的浏览器,例如IE6/7/8,此时可以到 [兼容] 下载一个 html5shiv.min.js 文件 ...
- shell echo单行和多行文字定向写入到文件中
转自:http://www.mamicode.com/info-detail-3078705.html shell echo单行和多行文字定向写入到文件中 单行文本: #!/bin/bash echo ...
- css单行,多行文字超出部分省略号显示
单行文字: white-space: nowrap;overflow: hidden;text-overflow:ellipsis; 多行文字: overflow-wrap: break-word;/ ...
- Jquery : 上下滚动--单行 批量多行 文字图片翻屏【转】
原文发布时间为:2010-02-01 -- 来源于本人的百度文章 [由搬家工具导入] 注:如果和左右滚动一起使用,则会出现冲突 一单行滚动(ad:http://www.gz138.com) <! ...
- 单行和多行文字溢出显示省略号
单行一般加这个三个属性即可 overflow:hidden; text-overflow: ellipsis; white-space: nowrap; 多行需加下面属性 display: -webk ...
- css三行代码实现多行文字超出部分省略号代替
就是我们在页面开发的时候有时为了更加美观,让文字在同行显示,超出的部分用省略号替代 而这个效果我们直接实现3行css实现 white-space: nowrap; 让文字在一行显示,不允许换行 ove ...
- css实现单行、多行超出显示省略号兼容火狐
css 单行,超出部分显示省略号 p{overflow:hidden;//超出部分隐藏text-overflow:ellipsis;//超出部分显示省略号white-space:nowarp;//不允 ...
- html怎么多行超出省略号,css+js 如何实现多行文字超出显示省略号(需要同时兼容ie chrome等浏览器)...
chrome浏览器下 ie11浏览器下 html ` ` css ` .trainInfo_text { position: relative; margin: 10px 0 10px 10px; w ...
- div css每行文字显示一半 同时文字字体重叠显示不全解决方法
CSS DIV布局中出现单行或多行文字的每行文字内容不能显示全,上下行文字有一点点重叠现象,文字字体只显示一半解决方法,在低版本IE特别明显文字字体显示不全,在谷歌浏览器等高版本IE浏览器测试还好些. ...
最新文章
- 图论-最短路Dijkstra算法详解超详 有图解
- 4g网络什么时候淘汰_5G时代,4G将淘汰?4G手机会不会像2g,突然失去网络
- mysql事务,START TRANSACTION, COMMIT和ROLLBACK,SET AUTOCOMMIT语法
- python 列表加入_加入python中的列表列表
- OpenNI2 + NiTE2开发教程
- 自如:全额承担“望京跑路二房东”受害客户损失,预计约500余万元
- Web MIDI API W3C
- 使用RIP协议处理不连续的子网和VLSM(一)
- VC++动态链接库(DLL)编程(三)――MFC规则DLL
- 03、C语言——顺序结构
- 信息安全系统设计基础实验二:固件设计(20135229,20135234)
- 吉林建筑大学电气与计算机学院院长,吉林建筑大学电气与计算机学院研究生导师:张玉红...
- python应聘要求_python爬取招聘要求等信息实例
- MongoDB笔记十四——启动配置详细讲解
- C语言小游戏------贪吃蛇----小白专用
- wav格式怎么转换mp3?
- CSS 框架 Bulma 教程
- 搭档之家|打造信息交互平台,推进合作新发展
- Supermap iClient 展示与空间数据绑定的图片
- 算法笔记胡凡 第3章 入门篇