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. kotlin高阶函数实战&DSL入门

    传统函数演示: 这里以电视节目“非诚勿扰”为例,男人去从一大堆美女当中挑选出自己中意的对象,比如台上有24位妹子,其档案如下: 接下来第一个男嘉宾出场啦,如下: 下面用代码来实现一下,比较简单: 先定 ...

  2. Windows KMS激活脚本

    @echo off&setlocal EnableDelayedExpansion&color 3etitle Windows KMS激活脚本 --by David :: 如果激活失败 ...

  3. Gym - 102082G What Goes Up Must Come Down (树状数组+贪心)

    题意:有一个长度为n的序列,你每次可以选择两个相邻的元素交换,求把这个序列排成单峰序列的最少交换次数. 方法一:将元素按数值从大到小排序(保存原来的位置),把最大的插在中间,剩下的依次往两边放,依次考 ...

  4. CH5101 LICS//hdu5904 LICS

    恭喜我已经正式沦为pj组选手QwQ 标题两个题其实不一样的.这是ch   这是hdu 一.CH上的:裸题,求LICS.n<=3000 经典普及组dp题,题解烂大街了.所以对于这题,只讲细节: $ ...

  5. 并发编程的锁机制:synchronized和lock

    1. 锁的种类 锁的种类有很多,包括:自旋锁.自旋锁的其他种类.阻塞锁.可重入锁.读写锁.互斥锁.悲观锁.乐观锁.公平锁.可重入锁等等,其余就不列出了.我们重点看如下几种:可重入锁.读写锁.可中断锁. ...

  6. Acwing-101-最高的牛(差分)

    链接: https://www.acwing.com/problem/content/103/ 题意: 有 N 头牛站成一行,被编队为1.2.3-N,每头牛的身高都为整数. 当且仅当两头牛中间的牛身高 ...

  7. centos7安装bower遇到的问题

    Bower依赖node, npm和git. 安装nodejs遇到 Error: Package: 1:nodejs-6.11.1-1.el7.x86_64 (epel) Requires: libht ...

  8. ubuntu安装wireshark

    $sudo apt-add-repository ppa:wireshark-dev/stable$sudo apt update$sudo apt install wireshark 出于安全方面的 ...

  9. C# 编辑

    if (state == "编辑") { ht["修改人"] = Helper.用户名; ht["修改时间"] = DateTimeHelp ...

  10. Nowcoder 挑战赛23 B 游戏 ( NIM博弈、SG函数打表 )

    题目链接 题意 : 中文题.点链接 分析 : 前置技能是 SG 函数.NIM博弈变形 每次可取石子是约数的情况下.那么就要打出 SG 函数 才可以去通过异或操作判断一个局面的胜负 打 SG 函数的时候 ...