Css实现文本超出div宽度时文本隐藏，使用省略号代替

Css实现文本超出div宽度文本隐藏省略号显示

    实现这个效果需要用到css的text-overflow属性，text-overflow表示文本溢出时发生的事情，它有三个属性值，分别是clip(修剪文本)、ellipsis(省略号代替)、string(指定字符串代替)。

     

<div class="context">sdsdsdsadsadsadas</div>


.context{
width:50px;//div的宽度必须是固定的
overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap;//文本不进行换行，默认下宽度不够就会换行。
}