html表格隐藏超出的内容
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html表格隐藏超出的内容相关的知识，希望对你有一定的参考价值。
请问如何设置，当表格的内容超出表格时，隐藏超出的内容，不超过表格表框，不增加表格的大小，（不需要滚动条）要最简单的做法
参考技术A 利用CSS，把表格设置属性overflow:hidden，行，列固定宽度本回答被提问者采纳 参考技术B <td class="item1"><div style="width: 100%;height: 100%; overflow:hidden; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;">test-test-test-test-test</div></td> 参考技术C overflow：hidden任然无视，它任然随着内容的高宽走；有两种方法：方法一：td里面嵌套div标签，给div添加宽高后加：
overflow：hidden；
display:-webkit-box;
-webkit-line-clamp:3;/* 你想显示的行数 */
-webkit-box-orient:vertical;
方法二：直接在td添加样式 :
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
第一种方法的好处是:可以随时设置要隐藏的行数，可以多行显示，你还可以直接设置overflow-y: scroll,出现竖向滚动条(如果你喜欢)；
第二种方法的好处是：不需要多的嵌套元素，缺点是只能显示一行内容.
一个方法的缺点是另一个方法的优点，嗯~，就这样...
以上是关于html表格隐藏超出的内容的主要内容，如果未能解决你的问题，请参考以下文章
html css。写一个表格排列内容。想要把表格的宽度设为固定值，当超过这个值时，超出部分隐藏。