今天拿到一个奇怪的 QC, 一个组件的 × 图标被显示成了省略号 (也是图标), 图示:
正常情况
正常情况, 文字溢出
异常情况, 触发: 选择一个文字长度加上图标宽度正好稍稍大于可显示宽度时
异常情况, 触发后
后面证实该问题在 IE 和 Firefox 下都不会出现, 故应当是 Chrome 本身对文本流处理溢出为 ellipse 时存在一定的问题, 它替换了原本的 × 图标, 修改为了省略号.
解决办法: 使图标脱离文档流, 比如
absolute
float
目前这个问题并未找到共例, 问题原因也是出于我简单的测试, 所以我会尝试在 https://github.com/GoogleChrome/puppeteer/issues/2409 提问, 以确定真正的问题原因.
第一次修改 - 添加复现问题的 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>
- <div class="test">
- <span class="text">aeeeeeeeeeee</span>
- <i class="iconfont"></i>
- </div>
- <button class="btn">change value</button>
- </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('.text')
- let $btn = document.querySelector('.btn')
- $btn.addEventListener('click', () => {
- console.log('123')
- $text.innerText = 'aeee'
- })
来源: http://www.jianshu.com/p/3e9d12df03c7