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. Ubuntu caffe 测试matlab接口

    这是17年8月份新增的: make matcaffe error 255解决:在Makefile里面,大约第410行那一句话CXXFLAGS += -MMD -MP下面添加CXXFLAGS += -s ...

  2. Java-Web servlet控制器的引入

    一.建包 二.建立实体类 参考二维表,考虑各个字段的名字.类型 private String id; private String name; private String address; publ ...

  3. Acwing-271-杨老师的照相排列(DP)

    链接: https://www.acwing.com/problem/content/273/ 题意: 杨老师希望给他的班级拍一张合照. 学生们将站成左端对齐的多排,靠后的排站的人数不能少于靠前的排. ...

  4. 什么叫AOP(面向切面编程)?

    spring的AOP面向切面编程,实现在不改变代码的情况下完成对方法的增强.比较常用的就是spring的声明式事务管理,底层通过AOP实现,避免了我们每次都要手动开启事物,提交事务的重复性代码,使得开 ...

  5. eclipse svn同步过滤掉某些不需要同步的文件

    注:这里说的svn是eclipse里svn插件 默认情况下,我们在点击svn同步时,总是会把一些不需要的目录和文件也给同步了,这样我觉得很晃眼睛,所以在这里说下怎么去去掉不想同步的文件 1.默认同步下 ...

  6. HEOI2016/TJOI2016 字符串问题

    题目链接:戳我 非常不好意思,因为想要排版,所以今天先只把代码贴出来,明天补题解. 40pts暴力:直接暴力匹配 #include<iostream> #include<cstrin ...

  7. HDU 6667 Roundgod and Milk Tea

    hdu题面 Time limit 6000 ms Memory limit 131072 kB OS Windows Source 2019 Multi-University Training Con ...

  8. 1209F - Koala and Notebook

    这场比赛没打,看同学fst了,于是来看看. 这道题看似简单,但是没想清楚细节真的不太行.像现在熬到十一点左右,脑子真的不行. 首先显然位数越小越好,因为每一位要比较,不如拆点.此时要拆成两条有向链(开 ...

  9. 使用 Reactjs + Mobx + React-Router 开发项目时 VSCode 编辑器报警 TS 相关的问题(提示experimentalDecorators )

    vscode 对于 JS support 的支持需要配置,在项目根目录下创建一个 jsconfig.json 文件,把以下内容贴入后保存,重启项目即可生效(去掉提示). { "compile ...

  10. 理解PyTorch的自动微分机制

    参考Getting Started with PyTorch Part 1: Understanding how Automatic Differentiation works 非常好的文章,讲解的非 ...