ie8渲染模式下的文本超长显示...，出现...与内容重叠的问题

无关紧要的前言

之前开发遇到问题都是随手记录在纸上或本子上，后期翻阅、查看总是有各种问题，所以决定也开始编写自己的博客，当作一个在线笔记本，以便自己复习。同时也希望能给其他人带来一些帮助。

问题描述

最近在IE8中遇到一个奇怪的问题，就是在ie8的ie8文本模式下，文本内容超长显示“...”，出现“...”与文本内容重叠的现象，且"..."的展现形式为与期待的有所不同，会垂直居中。（此时电脑系统为WIN10，ietester不能正常打开网页，就不粘截图了，后续有机会再补充）

简单测试代码

css内容：

.label-warp{display: block;width:30px;}
.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

html内容

<label class="label-warp ellipsis">请输入您的用户名：</label>

问题解决过程：

1、通过设置宽度没效果；总能找到恰好会重叠的样例；
2、网上查询相关问题解决方案，未果；
3、发现同一页面之下，有正常的情况，有异常的情况，对比当前元素、父元素层层节点的样式，仍然未解决问题；

发现原因：

后偶然之间发现出现问题的元素的内容全部是以中文开头的，且‘...‘的展现形式偏向中文；

解决问题：

发现原因之后的解决思路就是在内容前面追加一个英文的空格，大体方案有三种；

1、在每个包含'ellipsis‘类的元素的内容前面添加" "

<label class="label-warp ellipsis">&nbsp;请输入您的用户名：</label>

2、需要修改项比较多时，可以通过js操作处理:

<!--此处采用了jquery-->
function init() {
    <!--遍历全部ellipsis类，逐个添加英文空格-->
    $('.ellipsis').each(function () {
        var text = ' '+$(this).text();
        $(this).html(text);
    })
}
init();

3、采用css伪元素追加内容（个人推荐该方法，注意：''之间有个空格）：

.ellipsis:before{content: ' ';}