css字数超多显示省略号，鼠标移上去显示全部

<td id="" style="text-align: center; vertical-align: middle;max-width:100px;text-overflow:ellipsis;" title='中国，以华夏文明为源泉、中华文化为基础，据中国历史大系表记载经历了：有巢氏 [1]  、燧人氏 [2]  、伏羲氏 [3]  、神农氏(炎帝) [4]  、黄帝(轩辕氏) [5]  、尧、舜、禹等时代 [6-7]  ；到中国第一个朝代夏朝建立。'>
                                        <span>中国，以华夏文明为源泉、中华文化为基础，据中国历史大系表记载经历了：有巢氏 [1]  、燧人氏 [2]  、伏羲氏 [3]  、神农氏(炎帝) [4]  、黄帝(轩辕氏) [5]  、尧、舜、禹等时代 [6-7]  ；到中国第一个朝代夏朝建立。</span>
                                </td>

text-overflow:ellipsis;" title='中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国'

text-overflow:ellipsis 需要搭配着title属性用，否则当鼠标移动到td上时，不会显示全部的隐藏文字

text-overflow属性：

text-overflow：clip（不显示省略标记）/ellipsis（文本溢出时“...”显示）

　　定义此属性有四个必要条件：1）须有容器宽度：width：value；

　　　　　　　　　　　　　　　2）强制文本在一行内显示：white-space：nowrap；

　　　　　　　　　　　　　　　3）溢出内容隐藏：overflow：hidden；

　　　　　　　　　　　　　　　4）溢出文本显示“...”：text-overflow：ellipsis；

　　2.溢出属性：overflow：visible（默认值，不会被隐藏）

　　　　　　　　hidden（内容隐藏）

　　　　　　　　auto（如果内容隐藏，则浏览器内显示滚动条）

　　　　　　　　scroll（内容会隐藏并显示滚动条）

　　　　　　　　inherit（规定应该从父元素继承overflow属性的值）

　　　　　　　　注：overflow-x：hidden；隐藏横向滚动条

　　　　　　　　　　overflow-y：hidden；隐藏纵向滚动条