html表格 <td> 文字过多需要隐藏的正确方法

表格<td>中文字过多需要隐藏文字

正确的做法

一.强制文字不换行,并隐藏多余部分

CSS 代码

div{width:100px;overflow:hidden;white-space:nowrap;}
td{width:100px;overflow:hidden;white-space:nowrap;word-break:keep-all;}

HTML 代码

<div>中华人民共和国中华人民共和国</div>
<table>
<tr>
<td><div>中华人民共和国中华人民共和国</div></td>
</tr>
<tr>
<td>中华人民共和国中华人民共和国</td>
</tr>
</table>

全部 OK。可以看出 td 比 div 多一个 word-break:keep-all; //只能在半角空格或连字符处换行。。这是由于 IE 中，对 td 的解释与 Firefox、Chrome 的不同，若不加的话，IE 中第三行仍然会转到下一行，而不是截断。具体请参见兼容多浏览器，兼容 div、p、td 的强制不换行及强制换行。

二.设置宽高使用滚动条隐藏多余部分

css代码:

<style type="text/css">
#longer{height:80px;overflow:auto;word-break: normal;}
#long{overflow:hidden;word-break: normal;}
</style>

html:

<td class="text-left" id="long">
	<div id="longer"> 
		文章标签（添加Tag，你的内容能被更多人看到）我们为什么要打Tag？......
	</div>
</td> 

以上样式用到的知识点:

CSS3 word-break 属性

实例

在恰当的断字点进行换行：

p.test {word-break:hyphenate;}

定义和用法

word-break 属性规定自动换行的处理方法。

提示：通过使用 word-break 属性，可以让浏览器实现在任意位置的换行。

语法

word-break: normal|break-all|keep-all;

值	描述
normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

CSS overflow 属性

CSS 参考手册

实例

设置 overflow 属性：

div
  {
  width:150px;
  height:150px;
  overflow:scroll;
  }

亲自试一试

浏览器支持

所有主流浏览器都支持 overflow 属性。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

定义和用法

overflow 属性规定当内容溢出元素框时发生的事情。

说明

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

默认值：	visible
继承性：	no
版本：	CSS2
JavaScript 语法：	object.style.overflow="scroll"

可能的值

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

CSS white-space 属性 

CSS 参考手册

实例

规定段落中的文本不进行换行：

p
  {
  white-space: nowrap
  }

亲自试一试

浏览器支持

IE	Firefox	Chrome	Safari	Opera

所有浏览器都支持 white-space 属性。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

定义和用法

white-space 属性设置如何处理元素内的空白。

这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。

默认值：	normal
继承性：	yes
版本：	CSS1
JavaScript 语法：	object.style.whiteSpace="pre"

可能的值

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

本文参考: 点击打开链接