移动端实现标题文字的截断
2015-10-28 10:34
260 查看
适用场景
当屏幕分辨率为320X500时模块标题效果如下:
当屏幕分辨率为480X500时模块标题效果如下:
也就是当屏幕分辨率大时显示的文字多,分辨率小时显示文字少,同时需要保证这一部分始终完全显示。
实现方式
方案一: DEMO 来自@蒋轩哲
为整个容器 和 标题文字容器 添加 overflow:hidden;text-overflow:ellipsis;white-space:nowrap; 保证内容在一行内显示。效果如下,我们需要显示的网站标识同时也被省略掉了,这时我们接着改进
为标题文字容器添加 display:inline-block;max-width:100%;设置容器最大宽度为100%,这时我们发现网站标识被挤到了下面
为网站标识容器添加 display:inline-block;margin-left:-6em; 通过设置负margin让我们网站标识可以出显示在标题行里
为标题文字容器接着添加 padding-right:6em;box-sizing:border-box; 通过设置box-sizing属性值为border-box,把padding-right值占用的位置计算到了标题文字容器里,注意:padding- right的值正好是网站标识容器margin-left的调整的值。调整完后的效果如下:
最后我们调整一下标题文字容器和网站标识容器的垂直对齐方式让它们垂直居中对齐
方案二:DEMO 来自@guopi
为标题容器添加 display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80%;
最后我们调整一下对齐方式让内容在整个容器中垂直居中对齐
方案三:DEMO 来自@snadn
为标题容器添加
display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;vertical-align:top;
这里我们提前把垂直居中对齐设置好了。
为又整个容器 添加white-space:nowrap; 把内容控制成一行显示
接着为又整个容器添加margin-right:100px;把标题内容限制在一定的宽度内,好让网站标识显示出来。
在上面的效果中发现灰色背景也同时被限制在了一定的宽度内,所以我们把背景的设置提出来放在整个容器上,最终效果如下:
方案四:DEMO 来自@snadn
为标题容器添加 display:inline-block; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% – 100px);
最后我们调整一下对齐方式让内容在整个容器中垂直居中对齐
总结:
方案一和方案三对于不同分辨率下的截断效果比较统一
方案二在不同分辨率下有些差异,比如分辨率较大时内容会截断的多一些,分辨率小时内容又会截断的少一些
方案四在移动端的兼容性不是很好慎用。
当屏幕分辨率为320X500时模块标题效果如下:
当屏幕分辨率为480X500时模块标题效果如下:
也就是当屏幕分辨率大时显示的文字多,分辨率小时显示文字少,同时需要保证这一部分始终完全显示。
实现方式
方案一: DEMO 来自@蒋轩哲
为整个容器 和 标题文字容器 添加 overflow:hidden;text-overflow:ellipsis;white-space:nowrap; 保证内容在一行内显示。效果如下,我们需要显示的网站标识同时也被省略掉了,这时我们接着改进
为标题文字容器添加 display:inline-block;max-width:100%;设置容器最大宽度为100%,这时我们发现网站标识被挤到了下面
为网站标识容器添加 display:inline-block;margin-left:-6em; 通过设置负margin让我们网站标识可以出显示在标题行里
为标题文字容器接着添加 padding-right:6em;box-sizing:border-box; 通过设置box-sizing属性值为border-box,把padding-right值占用的位置计算到了标题文字容器里,注意:padding- right的值正好是网站标识容器margin-left的调整的值。调整完后的效果如下:
最后我们调整一下标题文字容器和网站标识容器的垂直对齐方式让它们垂直居中对齐
方案二:DEMO 来自@guopi
为标题容器添加 display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80%;
最后我们调整一下对齐方式让内容在整个容器中垂直居中对齐
方案三:DEMO 来自@snadn
为标题容器添加
display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;vertical-align:top;
这里我们提前把垂直居中对齐设置好了。
为又整个容器 添加white-space:nowrap; 把内容控制成一行显示
接着为又整个容器添加margin-right:100px;把标题内容限制在一定的宽度内,好让网站标识显示出来。
在上面的效果中发现灰色背景也同时被限制在了一定的宽度内,所以我们把背景的设置提出来放在整个容器上,最终效果如下:
方案四:DEMO 来自@snadn
为标题容器添加 display:inline-block; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% – 100px);
最后我们调整一下对齐方式让内容在整个容器中垂直居中对齐
总结:
方案一和方案三对于不同分辨率下的截断效果比较统一
方案二在不同分辨率下有些差异,比如分辨率较大时内容会截断的多一些,分辨率小时内容又会截断的少一些
方案四在移动端的兼容性不是很好慎用。
相关文章推荐
- android studio使用备忘录
- Unity3D 内存 释放
- Android之记录几个Uri的Intent.
- Java微信插件开发培训—10月28日 晚九点—腾讯课堂
- iOS开发json解析串打包
- Android ValueAnimator和ObjectAnimator的高级用法(代码实现)
- iOS 常用的数据存储方式
- webapp
- Beginning Auto Layout Tutorial in iOS 7: Part 2
- Beginning Auto Layout Tutorial in iOS 7: Part 1
- iOS9中spotlight的简单使用
- cocos2dx Material System讲解一
- Unity3d 动态读取外部文件
- 关于Android Studio上得处女座福音功能——reformat code
- unity3d 屏幕截图
- Android-完全退出当前应用程序的四种方法
- Android内存监测工具DDMS
- Swift自适应布局(Adaptive Layout)教程(一)
- Play Framework 完整实现一个APP(一)
- unity3d 动态改变模型大小、方向(展示必用)