JavaShuo
栏目
标签
移动端实现标题文字的截断
时间 2019-11-13
标签
移动
实现
标题
文字
截断
栏目
无线
繁體版
原文
原文链接
适用场景
当屏幕分辨率为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);
最后咱们调整一下对齐方式让内容在
整个容器
中垂直居中对齐
总结:
方案一和方案三对于不一样分辨率下的截断效果比较统一
方案二在不一样分辨率下有些差别,好比分辨率较大时内容会截断的多一些,分辨率小时内容又会截断的少一些
方案四在移动端的兼容性不是很好慎用。
相关文章
1.
纯 CSS 实现多行文字截断
2.
CSS 实现多行文字截断
3.
纯css实现多行文字截断
4.
移动端实现 iphone android 小图标 文字排版
5.
WordPress文章标题截断输出
6.
移动端字体问题
7.
汉字截断问题
8.
javascript文字跟随鼠标移动简易实现方法
9.
一种移动端模拟实现返回拦截的方案
10.
JavaScript-跟随鼠标移动的文字
更多相关文章...
•
Markdown 标题
-
Markdown 教程
•
现实生活中的 XML
-
XML 教程
•
☆基于Java Instrument的Agent实现
•
为了进字节跳动,我精选了29道Java经典算法题,带详细讲解
相关标签/搜索
截断
移动端 Web
移动端
论文实现
手动实现
移动
标题
移动端适配
移动端测试
移动端debug-6
无线
红包项目实战
NoSQL教程
PHP教程
后端
文件系统
0
分享到微博
分享到微信
分享到QQ
每日一句
每一个你不满意的现在,都有一个你没有努力的曾经。
最新文章
1.
排序-堆排序(heapSort)
2.
堆排序(heapSort)
3.
堆排序(HEAPSORT)
4.
SafetyNet简要梳理
5.
中年转行,拥抱互联网(上)
6.
SourceInsight4.0鼠标单击变量 整个文件一样的关键字高亮
7.
游戏建模和室内设计那个未来更有前景?
8.
cloudlet_使用Search Cloudlet为您的搜索添加种类
9.
蓝海创意云丨这3条小建议让编剧大大提高工作效率!
10.
flash动画制作修改教程及超实用的小技巧分享,硕思闪客精灵
本站公众号
欢迎关注本站公众号,获取更多信息
相关文章
1.
纯 CSS 实现多行文字截断
2.
CSS 实现多行文字截断
3.
纯css实现多行文字截断
4.
移动端实现 iphone android 小图标 文字排版
5.
WordPress文章标题截断输出
6.
移动端字体问题
7.
汉字截断问题
8.
javascript文字跟随鼠标移动简易实现方法
9.
一种移动端模拟实现返回拦截的方案
10.
JavaScript-跟随鼠标移动的文字
>>更多相关文章<<