行距小细节

大段文字的展示页,特别是涉及到一定行数后要将其后内容隐藏的情况(比如商品列表的简单详情说明)许多新手容易忽略line-height的设置。导致做出来的页面出现在不太的分辨率下下一行本该被隐藏的文字露出个头的情况。

解决这种问题只需要算好整内容高度与行距高度就能解决。举个例子,比如下图:


我们可以将div的样式写为

{    

    width:186px;

    height:40px;//考虑到行高对其进行了一定调整

    line-height:20px;//两行设置行高为总高度的1/2,其他行数以此类推

    color:#282828;

    font-size:15px;

    overflow: hidden;

    text-overflow:ellipsis;

    display:-webkit-box;

    -webkit-line-clamp:2;

}

对于其他有外框高度要求的可用padding进行调整。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Ba la la la ~ 读者朋友们,你们好啊,又到了冷锋时间,话不多说,发车! 一、line-hei...
    王饱饱阅读 660评论 0 1
  • 移动端样式小技巧 原文https://segmentfault.com/a/1190000006237977 平时...
    BABLOVE阅读 394评论 0 1
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,270评论 0 11
  • 1. 居中不定高div样式 参考:http://www.haorooms.com/post/css_div_juz...
    darr250阅读 5,059评论 0 7
  • 和菜头的《槽边往事》里有一篇文章,叫做《为何你有了爱人就不再文艺》。——因为那些曾经的文艺青年们既然找到了爱人,就...
    卓海阅读 633评论 0 0

友情链接更多精彩内容