前端那些坑

1. 文本超长显示省略号及safari显示自带tooltip修复办法

参照以下链接：Prevent Safari from showing tooltip when text overflow is hidden with ellipsis

CSS写法：

.text-inline {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.text-inline::before {
    content: '';
    display: block;
}
.text-inline::after {
    content: '';
    display: block;
}

LESS和SASS写法：

.text-inline {
    overflow: hidden;  
    white-space: nowrap;  
    text-overflow: ellipsis; 
    &:before {
        content: '';
        display: block;
    }
    &:after {
        content: '';
        display: block;
    }
}

2. 屏蔽/禁止用户双击选择文本

参照以下链接：Disable double click select

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

3. 导航栏在选中后出现蓝色虚边框

这是由于默认当元素获得焦点后会有一个outline，使用一下全局css可以解决该问题。

:focus {
    outline-style: none;
}