解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号

时间:2022-08-31 12:29:20

在表格布局中经常会遇到因为表格内容长短的变化导致布局混乱的情况,这个时候我们可能会有为了布局稳定把单元格宽度写死的情况;但是我们设置了宽度却发现超出了宽度之后会自动变大,用css定义元素的overflow:hidden;属性也不行;最后找的的解决方案如下:

table{

    table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}
如果担心隐藏了看不到完整的单元格内容建议在单元格上面加上title属性值就是单元格的完整内容这样只要鼠标经过就能显示全部了

解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号的更多相关文章

  1. CSS实现超出DIV宽度文字自动隐藏并显示省略号

    当文字超出DIV宽度时,超出的文字部分省略,并用显示省略号代替,css代码如下: div.ellipsis { padding-left: 5px; text-align: left; text-ov ...

  2. 解决element-ui表格表头内容太长时的换行问题

    在用vue+element-ui做一个后台管理系统时,遇到这样的问题, 如图: 使用el-table做一个表格,当表头内容过长时会换行,在不设置的宽度的时候每一列的宽度是等比例分配的,虽然elemen ...

  3. css强制换行和超出隐藏实现

        一.强制换行1 word-break: break-all; 只对英文起作用,以字母作为换行依据. 2 word-wrap: break-word; 只对英文起作用,以单词作为换行依据. 3 ...

  4. css强制换行和超出部分隐藏实现

    一.强制换行 1 word-break: break-all; 只对英文起作用,以字母作为换行依据. 2 word-wrap: break-word; 只对英文起作用,以单词作为换行依据. 3 whi ...

  5. CSS- 文本超出指定宽度后隐藏并显示为省略号

    一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:25em; word-break:keep-all;/* 不换行 * ...

  6. css 文本超出n行就隐藏并且显示省略号

    首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...

  7. 解决Linux CentOS中cp -f 复制强制覆盖的命令无效的方法

    Linux下默认cp命令是有别名的(alias cp='cp -i'),无法在复制时强制覆盖,即使你用 -f 参数也无法强制覆盖文件,下面提供几个从网上找的Linux下cp命令覆盖的方法. 1)取消c ...

  8. 怎样让HTML 表格中内容自动换行??

    <table style="word-break:break-all; word-wrap:break-all;">

  9. table内容超出宽度时隐藏并显示省略标记

    HTML中,一个表格,要达到二个条件: 1.内容多了不自动换行: 2.固定单元格宽度.如果内容超出,则隐藏: 如 果在IE下,只是写成<table style="table-layou ...

随机推荐

  1. 【LeetCode OJ】Validate Binary Search Tree

    Problem Link: https://oj.leetcode.com/problems/validate-binary-search-tree/ We inorder-traverse the ...

  2. java-vector hashtable过时?

    vector hashtable过时? 在用JAVA集合时,IDE提示 vector 以及hashtable被arraylist ,hashmap替代,而前者又是线程同步的,不知道为什么?是效率差了的 ...

  3. HDU 2516 取石子游戏&lpar;FIB博弈&rpar;

    取石子游戏 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  4. 李洪强iOS开发Swift篇—03&lowbar;字符串和数据类型

    李洪强iOS开发Swift篇—03_字符串和数据类型 一.字符串 字符串是String类型的数据,用双引号""包住文字内容  let website = "http:// ...

  5. 使用AES加密的帮助类

    在开发中经常使用加密/解密对一些内容进行处理,比如密码在存入数据库之前先经过加密处理等等,这里就把一个加密帮助类代码贴出来,供以后查找使用. 这个帮助类主要功能是对字符串和字节数组进行加密解密处理. ...

  6. sublime使用攻略

    一些常用的快捷键 Ctrl+Enter 在下一行插入新行.举个例子:即使光标不在行尾,也能快速向下插入一行. Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本. Ctrl+Shift ...

  7. 《Java技术》第一次作业

    (一)学习总结 1.在java中通过Scanner类完成控制台的输入,查阅JDK帮助文档,Scanner类实现基本数据输入的方法是什么?不能只用文字描述,一定要写代码,通过具体实例加以说明. (1)使 ...

  8. 解决Android编译时出现aapt&period;exe finished with non-zero exit value 1

    当出现这个错误的时候,说明了你的资源文件出错了.然而AS能给你提供的信息实在太少,看了半天没看出个所以然,也没有说明是哪个资源文件出错,一头雾水. 这时候就可以用 Gradlew 来调试. 而grad ...

  9. forEach循环

    一.语法 var myArr=['camille','2020','vas','en','France']; // 1.只输出元素,传一个参数 myArr.forEach(function (ele) ...

  10. 一&period;C&num;基础&colon;标识符和关键字

    只要语言就会有标识符,和关键字的概念,以下是C#的标识符与关键字: 一个字符串要成为标识符要满足的条件1:只包含字母,(包括大小写),数字,@符号,下划线——.2:首位可以是字母,@,但一定不能是数字 ...