表格字段过长，用CSS实现省略号显示

<span style="width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;" title="字段值">字段值<span>

使用到的CSS知识点：

1、 overflow:  当内容溢出元素框时发生的事情。

JavaScript 语法：object.style.overflow="scroll"

可设置的值：

visible  默认值，不剪切内容也不添加滚动条，内容多时，会呈现在元素框之外。

hidden 内容会被修剪，并且其余内容是不可见的。

scroll  内容会被修剪，但会显示滚动条用来查看其余的内容。

auto  在必需时对象内容才会被裁切或显示滚动条；

2、white-space ： 如何处理元素内的空白

JavaScript 语法：object.style.whiteSpace="pre"

可设置的值：

normal 默认值。空白会被浏览器忽略

pre 空白会被浏览器保留

nowrap 文本不会换行，直到遇到<br>标签

3、text-overflow: 当文本溢出包含元素时发生的事情。

JavaScript 语法：object.style.textOverflow="ellipsis"

可设置的值：

clip 修剪文本

ellipsis 显示省略号来代替被修剪的文本

string 使用给定的字符串来代替被修剪的文本

4、display 规定元素应该生成的框的类型。

JavaScript语法：object.style.display="none"

可设置的值：

none 元素将被隐藏，不会显示

block 元素将被显示为块级元素

        block元素的特点是：
　　总是在新行上开始；
　　高度，行高以及顶和底边距都可控制；
　　宽度缺省是它的容器的100%，除非设定一个宽度
　　<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

inline 元素将被显示为行内元素

       inline元素的特点是：
　　和其他元素都在一行上；
　　高，行高及顶和底边距不可改变；
　　宽度就是它的文字或图片的宽度，不可改变。
　　<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

inline-block 在同一行内的块级元素

       将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。 (准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)