注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

前端攻城师 郭培的博客

Be the best you can

 
 
 

日志

 
 
关于我

前端技术:http://hszy00232.blog.163.com/ 前端设计:http://blog.sina.com.cn/hsjs00232 职业:web前端工程师 现居地:北京 My QQ:365246295 Mail:hszy00232@163.com

网易考拉推荐

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

2013-12-27 18:35:38|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
适用场景
当屏幕分辨率为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. 方案四在移动端的兼容性不是很好慎用。
  评论这张
 
阅读(1082)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017