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换行用省略号代替的更多相关文章

  1. CSS换行和省略号

    换行 原地址:https://www.cnblogs.com/meowcool/p/10130103.html //强制不换行 div{ white-space:nowrap; } //自动换行 di ...

  2. CSS换行文本溢出显示省略号

    现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...

  3. CSS多余文本省略号显示

    CSS多余文本省略号显示 本次案例代码是在 elementui 当中的 table 组件中实际需求 当然使用的是纯 CSS3 代码,所以原生支持度高,兼容性高,所以可多场景应用 对于过长文本进行单行省 ...

  4. CSS换行:word-wrap、word-break和text-wrap区别

    一.word-wrap:允许对长的不可分割的单词进行分割并换行到下一行.(中英文处理效果一样) word-wrap有两个取值: 1.word-wrap: normal:只在允许的断字点换行(浏览器保持 ...

  5. CSS换行2

    1.可以使用强制换行符号<br />换行.如果在一个文章里可以在文章需要换行的地方加入<br />即可实现自动换行-常说的小换行,与换行前没有间隔.实例如下图 换行说明图无间隔 ...

  6. css文本超出省略号

    终于完成了项目了,今天我就分享自己在项目中比较实用的一些功能的实现,第一个就是纯css文本超出省略号 /* 文本单行超出省略号 */ .textels { overflow: hidden; text ...

  7. css样式显示省略号

     用css样式显示省略号,记 .xx{ display: block; width:200px;/*对宽度的定义,根据情况修改*/ overflow: hidden; white-space: n ...

  8. CSS换行:word-wrap、word-break和text-wrap差别

    一.word-wrap:同意对长的不可切割的单词进行切割并换行到下一行.(中英文处理效果一样) word-wrap有两个取值: 1.word-wrap: normal:仅仅在同意的断字点换行(浏览器保 ...

  9. CSS换行文本溢出显示省略号,多行

    首先,div部分 <body> <div>多行的显示该如何解决呢,后面经过一番google后,我找到了chrome的一个API可以解决上面提到的需求-webkit-line-c ...

随机推荐

  1. 网站实现https访问

    https协议 是一种通过计算机网络进行安全通信的传输协议.HTTPS经由HTTP进行通信,但利用SSL/TLS来加密数据包.HTTPS开发的主要目的,是提供对网站服务器的身份认证,保护交换数据的隐私 ...

  2. Phantomjs 请求与响应

    var page = require('webpage').create(); page.onResourceRequested = function(request) { console.log(' ...

  3. Socket的通信机制?

    套接字(socket)是通信的基石,是支持TCP/IP协议的网络通信的基本操作单元.它是网络通信过程中端点的抽象表示,包含进行网络通信必须的五种信息:连接使用的协议,本地主机的IP地址,本地进程的协议 ...

  4. mysql 递归查找所有子节点

    select dept_id from ( select t1.dept_id,t1.parent_id, if(find_in_set(parent_id, @pids) > 0, @pids ...

  5. HTML DOM 事件与方法

    HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序. 事件通常与函数结合使用,函数不会在事件发生前被执行! (如用户点击按钮). 鼠标事件 键盘事件 框架/对象(F ...

  6. HDU 6669 Game

    hdu题面 解题思路 首先我们要选一个起点,这个起点应该在第一个区间内,然后再看第二个区间在左边还是右边以便移动,但转念一想,我们可以把起点直接选在前一堆区间的交集上,于是思路就有了--依次把所有区间 ...

  7. MySQL数据库入门——备份数据库

    mysqldump可以针对单个表.多个表.单个数据库.多个数据库.所有数据库进行导出的操作 mysqldump常用选项 -h, --host=name:服务器IP -u, --user=name:登录 ...

  8. 51nod11443-路径和树(图论,最短路,最小生成树)

    1443 路径和树 题目来源: CodeForces 基准时间限制:1.5 秒 空间限制:131072 KB 分值: 160 难度:6级算法题 收藏 关注 给定一幅无向带权连通图G = (V, E) ...

  9. R_Studio(贷款)数据规范化处理[最小-最大规范化、零-均值规范化、小数定标规范化]

    农场申请贷款.csv 对“农场申请贷款.csv”中农场大小.降雨量.农场质量.农场收入进行数据规范化处理 行数[4 5 6 7] “农场申请贷款.csv”中存在缺失值,已对数据进行预处理 setwd( ...

  10. 实验吧(你真的会PHP吗)CTF之代码审计最终版---解析是错的 我的才是对的

    0X01代码的详细讲解 0X02代码分析完了 我们来理一下 思路 条件 A POST提交一个number参数的值不能为纯数字 C number取整数后是回文数 D number经过strval转译后的 ...