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

适用场景

当屏幕分辨率为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);
最后我们调整一下对齐方式让内容在整个容器中垂直居中对齐

总结:

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

转载于:https://www.cnblogs.com/hupan508/p/4916568.html

移动端实现标题文字的截断相关推荐

word标题文字居中浅谈
在Word排版时,要将标题在文档居中,是有区别的,如下图在回车键后,在选择标题居中,我们常认为标题就是在整个文档居中了,但是实际上只是在回车键到右边区域居中而已,如上图红色方块居中. 只有在标题文字 ...
CRNN：端到端不定长文字识别算法
点击上方"AI搞事情"关注我们 ❝ 论文:<An End-to-End Trainable Neural Network for Image-based Sequence R ...
swift5导航栏标题文字属性设置
swift5导航栏标题文字属性设置在oc里面想必大家都非常熟悉,那么在swift5里面,怎么设置导航栏标题的文字呢. 先看oc. self.navigationItem.title = @" ...
pyqt 取鼠标处文字_爱剪辑：炫彩的动态标题文字特效，这招让视频片头LOGO更酷炫...
爱剪辑学习委员会提醒您: 道路千万条,学习第一条. 教程不学会,制作两行泪. 今天教大家制作炫彩的动态标题文字特效,3步即可快速学会,让你立马不再流泪. 爱剪辑官网下载:http://www.aiji ...
绑定gridview去掉标题文字粗体。
<asp:TemplateField HeaderText="任务名称" HeaderStyle-Font-Bold="false"><Ite ...
jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏
1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历 ...
jQuery标题文字淡入淡出显示效果
reveal-it.js是一款jQuery文字淡入淡出显示特效插件.该文字特效插件可以使文字从左向右淡入淡出显示.该jq插件小巧简单,非常适合用于制作标题文字的动画效果. 在线演示:http://ww ...
手绘标记视频标题文字介绍ae模板
这是一个手绘标记视频标题文字介绍ae模板,包含12个具有闪电和电力效果的独特外观和动态动画标题.一个很好的方式,增强视频演示.幻灯片.节目.商业广告.体育促销.活动.Facebook和YouTube视 ...
创意视频标题文字模板 Big Titles 2.0 | Premiere Pro
Premiere Pro 创意视频大标题文字动画PR模板易于自定义,更改文本.图像.颜色快速渲染无需插件视频教程 Big Titles 2.0 Premiere Pro The templat ...
自媒体视频素材|短视频标题文字动画PR模板素材
自媒体视频制作素材|短视频标题文字动画PR模板素材下载项目详细信息这是一个Premiere Pro模板,包含4个独特的标题.你可以根据自己的需要改变颜色.您可以将其用作内容的简短介绍.包括视频教程 ...

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

移动端实现标题文字的截断相关推荐

最新文章

热门文章