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 ...
随机推荐
- centos7安装es
#安装java1.8rpm -ivh jdk-8u191-linux-x64.rpm #解压estar -zxvf elasticsearch-6.4.0.tar.gz -C /usr #修改es限制 ...
- Java程序员必备的一些流程图
Java程序员必备的一些流程图 转自https://juejin.im/post/5d214639e51d4550bf1ae8df 前言: 整理了一些Java基础流程图/架构图,做一下笔记,大家一起学 ...
- C# 1.0(2002)
序言 C# 1可以看做2001年Java语言的升级版. 主要功能 类 结构 接口 事件 属性 委托 表达式 语句 特性 值类型和引用类型 装箱和拆箱 资料
- POJ 2195 一人一房 最小费用流 建图 水题
Going Home Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 21010 Accepted: 10614 Desc ...
- [JZOJ6241]【NOI2019模拟2019.6.29】字符串【数据结构】【字符串】
Description 给出一个长为n的字符串\(S\)和一个长为n的序列\(a\) 定义一个函数\(f(l,r)\)表示子串\(S[l..r]\)的任意两个后缀的最长公共前缀的最大值. 现在有q组询 ...
- 利用gephi作人物网络图
一.先利用word2vec训练数据得到模型 a.利用jieba对文本进行分词,并只提取词性为人名的词,去除分词长度为1和大于4的词 b.利用word2vec训练分词后的文本,并存储 c.利用训练后的模 ...
- openwrt 下python程序后台运行,并将打印信息保存文件
python -u gw20191223.py > test.log 1 2 & "python" 表示执行python代码 "-u" 表示不启 ...
- POJ 6621: K-th Closest Distance(主席树 + 二分)
K-th Closest Distance Time Limit: 20000/15000 MS (Java/Others) Memory Limit: 524288/524288 K (Jav ...
- php正则表达式的学习
真的发现什么都需要这个 所以还是来把它学了吧 正则表达式的基本知识汇总 行定位符(^与$) 行定位符是用来描述字符串的边界.“$”表示行结尾“^”表示行开始如"^de",表示以de ...
- Android学习_7/23
1. 在活动中使用Menu 1) 什么是Menu? 2) 怎么实现? step1:res目录下创建Menu resource file,使用<item… ...