文本超出容器后省略号显示

在进行页面设计的时候文本一般是后台给的数据，无法确定它的长度，但是为了使文本的长度过长的时候不会影响容器大小，这个时候我们可能选择的方式是通过设置容器大小然后再设置它的overflow:hidden；但是这样就可能会显示滚动条，影响页面的美观，我们在网上看到的大多数方式都是通过使用省略号的形式，具体的css设置为：

/*这里面有一个特别需要注意的地方，使用该效果的元素必须具有可计算的width，否则text-overflow没有省略号的效果，只有隐藏效果*/
.xxx{
    overflow: hidden;    /*超出部分隐藏*/
    white-space: nowrap;    /*不换行*/
    text-overflow: ellipsis    /*设置超出内容为省略号*/
}