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 ...
随机推荐
- oracle 环境变量问题
ORACLE_HOME 配置为oracle ..\dbhome_1 配置错误可能导致监听起不来 (也有可能是在装client时可能会更改了之前变量的值) TNS_ADMIN ...
- python ddt及logging(九)
一.安装 ①执行语句: pip install ddt ②在单元测试中DDT用来进行数据驱动,数据与测试代码分离(数据发生变化时,用例可以保持不变),一组数据来执行相同的操作. 一般进行接口测试时,每 ...
- P2197 【模板】nim游戏
博弈初心者... 学习地址luogu上可以找到.关于比较好的证明地址放在了地址页里了.这里不再赘述. 大概感觉还是所谓先手必胜就是面对当前局面一定可以采取一种策略,然后后手无论再怎么做,先手都可以“控 ...
- 我说CMMI之七:需求管理过程域--转载
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/dylanren/article/deta ...
- 使用Nginx的proxy_cache缓存功能取代Squid[原创]
使用Nginx的proxy_cache缓存功能取代Squid[原创] [文章作者:张宴 本文版本:v1.2 最后修改:2009.01.12 转载请注明原文链接:http://blog.zyan.cc/ ...
- CSS之运算,Sass 之运算(加、减、乘、除)
1. 加减法 加减法不是重点,重点是在SassScript中用到的两种单位之间的转换:绝对单位:px, pt, pc, in, mm, cm...绝对单位都能运算:相对单位:ex, em, rem.. ...
- CGI中使用Cookie
在 http 协议一个很大的缺点就是不对用户身份的进行判断,这样给编程人员带来很大的不便, 而 cookie 功能的出现弥补了这个不足. cookie 就是在客户访问脚本的同时,通过客户的浏览器,在客 ...
- Unity3D_(游戏)甜品消消乐01_游戏基础界面
甜品消消乐游戏 (脚本源码在游戏UI设计最下方) 三消游戏,存在L型消除有一点小Bug,当甜品在饼干附近消除时会清除饼干 饼干作为游戏障碍物时不可移动的,多块饼干并排时会挡住甜品掉落 发现消除类游戏的 ...
- 分布式-信息方式-JMS Queue示例
代码 package test.mq.helloword; import javax.jms.Connection; import javax.jms.ConnectionFactory; impor ...
- html5 canvas简易时钟
<canvas id='clock' width=500 height=500> 您的浏览器需要升级 </canvas> <script type="text/ ...