移动端实现标题文字的截断

适用场景

当屏幕分辨率为320X500时模块标题效果以下：

当屏幕分辨率为480X500时模块标题效果以下：

也就是当屏幕分辨率大时显示的文字多，分辨率小时显示文字少，同时须要保证这一部分始终彻底显示。

实现方式

方案一： DEMO 来自@蒋轩哲

1.  为整个容器 和 标题文字容器 添加 overflow:hidden;text-overflow:ellipsis;white-space:nowrap;  保证内容在一行内显示。效果以下，咱们须要显示的网站标识同时也被省略掉了，这时咱们接着改进
2. 为标题文字容器添加 display:inline-block;max-width:100%;设置容器最大宽度为100%，这时咱们发现网站标识被挤到了下面
3. 为网站标识容器添加 display:inline-block;margin-left:-6em; 经过设置负margin让咱们网站标识能够出显示在标题行里
4. 为 标题文字容器接着添加 padding-right:6em;box-sizing:border-box; 经过设置box-sizing属性值为border-box，把padding-right值占用的位置计算到了标题文字容器里，注意：padding- right的值正好是网站标识容器margin-left的调整的值。调整完后的效果以下：
5. 最后咱们调整一下标题文字容器和网站标识容器的垂直对齐方式让它们垂直居中对齐

方案二：DEMO  来自@guopi

1. 为标题容器添加 display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80%;
2. 最后咱们调整一下对齐方式让内容在整个容器中垂直居中对齐

方案三：DEMO 来自@snadn

1. 为标题容器添加 display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;vertical-align:top; 这里咱们提早把垂直居中对齐设置好了。
2. 为又整个容器 添加white-space:nowrap; 把内容控制成一行显示
3. 接着为又整个容器添加margin-right:100px;把标题内容限制在必定的宽度内，好让网站标识显示出来。
4. 在上面的效果中发现灰色背景也同时被限制在了必定的宽度内，因此咱们把背景的设置提出来放在整个容器上，最终效果以下：

方案四： DEMO 来自@snadn

 

1. 为标题容器添加 display:inline-block; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% – 100px);
2. 最后咱们调整一下对齐方式让内容在整个容器中垂直居中对齐

总结:

1. 方案一和方案三对于不一样分辨率下的截断效果比较统一
2. 方案二在不一样分辨率下有些差别，好比分辨率较大时内容会截断的多一些，分辨率小时内容又会截断的少一些
3. 方案四在移动端的兼容性不是很好慎用。