Text overflow | single-line text display overflow ellipsis

Text overflow

Overflow property

    语法：overflow:visible/hidden(隐藏)/scroll/auto（自动）/inherit
    
    visible:默认值，内容不会被修剪，会呈现在元素框之外；
    hidden：内容会被修剪，并且其余内容是不可见的；
    scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;
    auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;
    inherit：规定应该从父元素继承 overflow 属性的值(ie浏览器不支持此属性值) 。

Free space

    语法：white-space:normal/pre/nowrap/pre-wrap/pre-line/inherit
    
    该属性用来设置如何处理元素内的空白；
    normal：默认值，空白会被浏览器忽略，
    pre：空白会被浏览器保留，其行为方式类似HTML中的pre标签；
    pre-wrap：保留空白符序列和换行符，但是正常的进行换行(碰到边缘)；
    pre-line:合并空隔符，但是保留换行符；
    nowrap:文本不会换行，文本会在同一行上继续，直到遇到<br/>标签为止；

Text overflow

    语法：text-overflow：clip/ellipsis
    
    取值：
    clip：不显示省略号（...），而是简单的裁切;
    ellipsis：当对象内文本溢出时，显示省略标记；

to sum up

    text-overflow属性仅是...，当文本溢出时是否显示省略标记，
    并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义：
    1、容器宽度：width：value；
    2、强制文本在一行内显示:white-space：nowrap;
    3、溢出内容为隐藏：overflow：hidden；
    4、溢出文本显示省略号：text-overflow：ellipsis;