Chrome把iconfont（字体图标）改变为省略号问题
2018-04-18 本文已影响62人
歇歇
今天拿到一个奇怪的QC，一个组件的×图标被显示成了省略号（也是图标），图示：
正常情况
正常情况，文字溢出
异常情况，触发：选择一个文字长度加上图标宽度正好稍稍大于可显示宽度时
异常情况，触发后
后面证实该问题在IE和Firefox下都不会出现，故应当是Chrome本身对文本流处理溢出为ellipse时存在一定的问题，它替换了原本的×图标，修改为了省略号。
解决办法：使图标脱离文档流，比如
absolutefloat
目前这个问题并未找到共例，问题原因也是出于我简单的测试，所以我会尝试在GoogleChrome提问，以确定真正的问题原因。
第一次修改 - 添加复现问题的demo代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="//at.alicdn.com/t/font_609639_qyl6452fp2l6jemi.js"></script>
</head>
<body>
<h3>normal: fonticon render exactly</h3>
<div class="test">
<span class="text">aeee</span>
<i class="iconfont"></i>
</div>
<br>
<h3 style="color:red;">fonticon error: when the textflow is just overflow the container, the fonticon was changed by explorer . </h3>
<div class="test">
<span class="text err">aeee</span>
<i class="iconfont"></i>
</div>
<button class="btn">change value</button>
<br>
<br>
<p>1. in two case(normal\fonticon error) the fonticon is same.</p>
<p>2. onece the icon was changed by chrome, it will not recover never.</p>
</body>
</html>
@font-face {
font-family: 'iconfont'; /* project id 609639 */
src: url('//at.alicdn.com/t/font_609639_qyl6452fp2l6jemi.eot');
src: url('//at.alicdn.com/t/font_609639_qyl6452fp2l6jemi.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_609639_qyl6452fp2l6jemi.woff') format('woff'),
url('//at.alicdn.com/t/font_609639_qyl6452fp2l6jemi.ttf') format('truetype'),
url('//at.alicdn.com/t/font_609639_qyl6452fp2l6jemi.svg#iconfont') format('svg');
}
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.test {
width: 123px;
height: 24px;
border: 1px solid #666;
overflow: hidden; /* key property*/
text-overflow: ellipsis; /* key property*/
white-space: nowrap; /* key property*/
}
.iconfont {
display: inline-block; /* key property*/
font-size: 12px;
color: #aaa;
transform: scale(.8) /*diffrent from text-verfow ellipsis*/
}
.btn {
}
let $text = document.querySelector('.err')
let $btn = document.querySelector('.btn')
$btn.addEventListener('click', () => {
$text.innerText === 'aeee' ?
$text.innerText = 'aeeeeeeeeeee' : $text.innerText = 'aeee'
})
