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

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

【转载】文本超出显示隐藏的几个方法  

2015-01-15 23:23:48|  分类: HTML&&CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
音乐名:我的左手旁边是你的右手
豆瓣评分:8.0分(206人评价)
博主评价:
未评价很差较差还行推荐力荐
来自豆瓣音乐资源
一、当行文本超出隐藏
.wrap {
overflow: hidden;
width: 300px;
       height: 300px;
text-overflow: ellipsis;
white-space: nowrap;
}
二、多行文本超出隐藏
.wrap {
overflow: hidden;
width: 300px;
height: 300px;
background: #f00;
line-height: 30px;
text-overflow: ellipsis;
-webkit-line-clamp:10; /* 用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的 WebKit属性。 */
display: -webkit-box; /* 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示  */
-webkit-box-orient:vertical;/*可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。*/
}
注:这个只适合webkit内核的浏览器和移动端
欢迎学习交流------梦幻雪冰

三、可以兼容大多数浏览器的多行文本超出隐藏方式
.wrap {
position: relative;
overflow: hidden;
width: 300px;
height: 300px;
background: #f00;
line-height: 30px;
}
.wrap::after {
   content:"...";
   position:absolute;
   bottom:0;
   right:0;
   padding:0 20px 1px 45px;
   background:url(dot.png) repeat-y;
}

欢迎学习交流------梦幻雪冰
  评论这张
 
阅读(97)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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