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. Efficient Estimation of Word Representations in Vector Space (2013)论文要点

    论文链接:https://arxiv.org/pdf/1301.3781.pdf 参考: A Neural Probabilistic Language Model (2003)论文要点  https ...

  2. 清除zencart分类页多页后面的&disp_order &sort字符串的方法

    在includes\classes\split_page_results.php页面中的function display_links()函数第一行添加如下两行代码即可$parameters=preg_ ...

  3. java8学习之Stream源码分析

    上一次已经将Collectors类中的各种系统收集器的源代码进行了完整的学习,而在之前咱们已经花了大量的篇幅对其Stream进行了详细的示例学习,如: 那接下来则通过源代码的角度来对Stream的运作 ...

  4. Java 和JavaScript实现C#中的String.format效果

    1.Java实现      /**      * 需要引入com.alibaba.fastjson.1.2.8     * String result2=HuaatUtil.format(templa ...

  5. Mysql数据同步Elasticsearch方案总结

    Mysql数据同步Elasticsearch方案总结 https://my.oschina.net/u/4000872/blog/2252620

  6. Android Studio 中出现APK error

    可能有很多人在用Android Studio编写程序时,时不时的会出现一个APK error的错误,反正我自从开始用Android Studio后,这个错误真的是时不时的蹦跶出来 最开始的时候,我是去 ...

  7. IDEA创建spring加struts2项目

    选择spring和struts,注意版本,不同的struts版本,过滤器的位置不一样 选择存放位置,并点击完成创建项目,在创建过程中会自动下载相关jar 初始化完成后的目录结构为 修复生成的web.x ...

  8. js 数组的forEach 函数

    var numbers = [4, 9, 16, 25]; function myFunction(item, index) { console.log("item:" + ite ...

  9. LOJ #6145. 「2017 山东三轮集训 Day7」Easy 点分树+线段树

    这个就比较简单了~ Code: #include <cstdio> #include <algorithm> #define N 100004 #define inf 1000 ...

  10. 17.Python print()函数高级用法

    前面使用 print() 函数时,都只输出了一个变量,但实际上 print() 函数完全可以同时输出多个变量,而且它具有更多丰富的功能. print() 函数的详细语法格式如下: print (val ...