css换行用省略号代替
css换行用省略号代替,也可以说是长标题的文章可以使用简单的CSS样式实现省略号控制显示。
.text-overflow{
display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}
对于表格的话,定义有一点不一样:
table{
width:30em;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
} td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}
参考资料:【http://www.9v.hk/tech/diy_css/48.html】
css换行用省略号代替的更多相关文章
- CSS换行和省略号
换行 原地址:https://www.cnblogs.com/meowcool/p/10130103.html //强制不换行 div{ white-space:nowrap; } //自动换行 di ...
- CSS换行文本溢出显示省略号
现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...
- CSS多余文本省略号显示
CSS多余文本省略号显示 本次案例代码是在 elementui 当中的 table 组件中实际需求 当然使用的是纯 CSS3 代码,所以原生支持度高,兼容性高,所以可多场景应用 对于过长文本进行单行省 ...
- CSS换行:word-wrap、word-break和text-wrap区别
一.word-wrap:允许对长的不可分割的单词进行分割并换行到下一行.(中英文处理效果一样) word-wrap有两个取值: 1.word-wrap: normal:只在允许的断字点换行(浏览器保持 ...
- CSS换行2
1.可以使用强制换行符号<br />换行.如果在一个文章里可以在文章需要换行的地方加入<br />即可实现自动换行-常说的小换行,与换行前没有间隔.实例如下图 换行说明图无间隔 ...
- css文本超出省略号
终于完成了项目了,今天我就分享自己在项目中比较实用的一些功能的实现,第一个就是纯css文本超出省略号 /* 文本单行超出省略号 */ .textels { overflow: hidden; text ...
- css样式显示省略号
用css样式显示省略号,记 .xx{ display: block; width:200px;/*对宽度的定义,根据情况修改*/ overflow: hidden; white-space: n ...
- CSS换行:word-wrap、word-break和text-wrap差别
一.word-wrap:同意对长的不可切割的单词进行切割并换行到下一行.(中英文处理效果一样) word-wrap有两个取值: 1.word-wrap: normal:仅仅在同意的断字点换行(浏览器保 ...
- CSS换行文本溢出显示省略号,多行
首先,div部分 <body> <div>多行的显示该如何解决呢,后面经过一番google后,我找到了chrome的一个API可以解决上面提到的需求-webkit-line-c ...
随机推荐
- java8学习之Collectors工厂类源码分析与实战
如上一节[http://www.cnblogs.com/webor2006/p/8360232.html]在结尾处谈到的,彻底理解了Collector收集器之后,有必要对其系统Collectors实现 ...
- Open cup #2
A D:用前面的H去消去后面的K 然后求最长连续的M F:在每一列/行里面求最大的数然后组成最大的和ans[]里的比求出最大的 L:并查集 J:DP背锅题 01背包 先求出M种里每种的size和las ...
- 多线程之CountDownLatch
下面请看一个应用场景:有1个driver和5个worker,需要满足以下两点要求: 当driver完成了全部的工作之后才允许worker们开始工作: 当所有的worker都完成了自己的工作之后,dri ...
- java内存泄漏与处理
内存溢出 out of memory,是指程序在申请内存时,没有足够的内存空间供其使用,出现out of memory: 内存泄露 memory leak,是指程序在申请内存后,无法释放已申请的内存空 ...
- Docker从0开始之部署一套2048
创建容器并运行程序 [root@localhost ~]# docker run -d -p 8888:80 daocloud.io/daocloud/dao-2048:master-a2c564e ...
- BZOJ1787 [Ahoi2008]Meet 紧急集合[结论题]
location. 求到树上三点距离和最短的点及此距离. 这个不还是分类讨论题么,分两类大情况,如下图. 于是乎发现三个点对的lca中较深的那个lca是答案点.距离就是两两点对距离加起来除以2即可.这 ...
- dlerror和dlclose用法
dlclose() 1. 包含头文件 #include<dlfcn.h> 2. 函数定义 int dlclose(void *handle) dlclose用于关闭指定句柄的动态链接库, ...
- asp.net 怎么上传文件夹啊,不传压缩包!
ASP.NET上传文件用FileUpLoad就可以,但是对文件夹的操作却不能用FileUpLoad来实现. 下面这个示例便是使用ASP.NET来实现上传文件夹并对文件夹进行压缩以及解压. ASP.NE ...
- 手动升级 Confluence 6 - 升级以后
7. 重新安装服务(仅针对 Windows) 如果你的 Confluence 安装实例在 Windows 中是以服务来运行的话,你需要删除已经存在的 Windows 服务,然后重新安装 Windows ...
- CDOJ 图论专题 A.不是图论 强连通分量+拓扑排序 经典
题目链接 在其中纠错第一次wa代码 #include <cstdio> #include <cstring> #include <cstdlib> #includ ...