前端零碎常用的小技巧之----超过div宽度，自动省略号

 

本猿是写java后台的，无奈现在任职的公司基本前后端通吃。经常也要捣鼓前端的知识。

 超过div宽度，自动省略号

ps：这个我遇到过无数次了，无数次都是百度一下复制，粘贴?

div {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap; 
}

效果如下：

在没有设定高度的情况下，汉字超过会自动换行，字母数字则不会，他会超过显示。

• 先来看看加上这个

div {
    white-space: nowrap; 
}

white-space:nowrap意思是：文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

• 再加上这个

div {
    overflow: hidden;
    white-space: nowrap; 
}

 效果如下

超出的部分被遮住了。

overflow这个绝对不陌生，overflow:hidden意思是：内容会被修剪，并且其余内容是不可见的。

• 最后加上这个

div {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap; 
}

 大功告成：

text-overflow:ellipsis的意思就是：显示省略符号来代表被修剪的文本。

所以以后遇到这个问题就想着散步

1. 不换行：white-space:nowrap
2. 超出部分隐藏：overflow:hidden
3. 换成省略号:text-overflow:ellipsis