css中文字操超出固定个数显示省略... 超出隐藏

先上样式

<div class="text">
    我是一段文字，超出固定个数显示省略号
</div>

 

.text {
    /* 超出10个字隐藏，之所以设置11em是因为省略号占一个位置 */
    width: 11em;
    overflow: hidden;
    /* 显示省略符号来代表被修剪的文本。 */
    text-overflow:ellipsis; 
    /* 文本不换行 */
    white-space:nowrap;
}

如果想要让鼠标hover显示全部内容可添加一个title

<div class="text" title="我是一段文字，超出固定个数显示省略号">
    我是一段文字，超出固定个数显示省略号
</div>