超出文本省略号显示

超出文本省略号显示

white-space:nowrap;  /*强制不换行*/
overflow:hidden; /*当对象内文本溢出时隐藏*/
text-overflow:ellipsis;  /*当对象内文本溢出时显示省略标记*/

通常使用这三行便可。例如：

<div>
    <p>When you are old and grey and full of sleep</p>
</div>

<style>
            div{
                width: 200px;
                border: 1px solid black;
            }
            p{
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
}
</style>

效果以下：

但是当我把p标签中的这段文字做为连接修改标签为a的时候，出现了问题：

<div>
    <a href="#" alt="link">When you are old and grey and full of sleep</a>
</div>

<style>
            div{
                width: 200px;
                border: 1px solid black;
            }
            a{
                text-decoration: none;
                color: black;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
</style>

结果效果以下：

仍是在一行显示，说明 white-space: nowrap;是有做用的，那么就是后面两句出了问题。由于a标签为内联元素，不能设置宽高，其宽即为文本的宽度，overflow：hidden；这个属性定义溢出元素内容区的内容会隐藏，a标签的内容并无溢出，则overflow就不起做用了。而要实现超出文本隐藏则须要设置a标签的 display: inline-block;或者display: block;

a{
                display: inline-block;/*display: block;*/
                text-decoration: none;
                color: black;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }