需求
描述标题文字在一个动态宽度的div中，文字后面要有一个提示用的图标。要求文字长度溢出后，显示省略号…，但是不要影响提示用图标的显示。
原理
利用了inline-block可以多个元素共存于一行，而且可以设置最大宽度的特性，并在文字和整行宽度之间留出图标所需的空余空间即可。
实现方式
CSS3实现：通过max-width使文字宽度动态且不超出，这样图标就可以自然跟在文字后面。利用calc计算留出图标所需的空间。
// 文字部分样式
display: inline-block;
max-width: calc(100% - 35px);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
// 图标部分样式
width: 1em;
height: 1em;
vertical-align: 2px;
CSS2.1实现：利用absolute绝对定位元素相对指定元素定位不占空间的特性，把图标藏到文字的padding-right部分中并紧贴文字右侧。
// 文字部分样式
box-sizing: border-box;
position: relative;
display: inline-block;
max-width: 100%;
padding-right: 1.5em;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
// 图标部分样式
position: absolute;
top: 3px;
right: 0;
width: 1em;
height: 1em;
展示
单行文字超出隐藏配合图标https://darknesschaser.github.io/my-front-end-test/css-text-overflow-test/index.html
