行距小细节
2019-07-09 本文已影响0人
折扇随笔
大段文字的展示页,特别是涉及到一定行数后要将其后内容隐藏的情况(比如商品列表的简单详情说明)许多新手容易忽略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进行调整。