移動端實現標題文字的截斷

適用場景

當屏幕分辨率爲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. 方案四在移動端的兼容性不是很好慎用。