移动端web页文案超长省略是前端开发中常见的场景。主要有多行、单行、限定宽度的省略。多行常用方法line-clamp，限定宽的max-width等。本文主要解决的是单行但有非自适应内容，长文案在剩余宽度自适应省略的情况。常见于用户名（可能很长）后面跟着小icon，多个标签中有个超长的标签等情况。
1. 效果图：
2. 实现方案：
flex布局+line-clamp，关键在于将不自适应的元素设置成flex-shrink: 0；自适应的元素（代码中的long_text）设置flex-shrink: 1 且配合line-clamp单行省略套装。
3. 核心代码：
重点关注line、short_text、long_text中和flex布局以及webkit-box省略相关的css代码，间距、边框和背景色等仅为了样式好看点，和实现没啥关系，不看也罢。
结尾：代码的具体含义，不清楚的就去查吧，自己动手，印象更深O(∩_∩)O ~
