html移动端 多行多列,移动端样式小技巧css设置多行省略

移动端样式小技巧 line-height

一般我们的产品列表样式，会有标题行数的限制。

怎么实现呢？

.demo{

display: -webkit-box;    //1.设置display类型为-webkit-box

font-size: 14px;

line-height: 18px;

overflow: hidden;        //2.设置元素超出隐藏

text-overflow: ellipsis; //3.设置超出样式为省略号

-webkit-line-clamp: 2;   //4.设置2行应用省略

-webkit-box-orient: vertical;

}

这样设置还要考虑一个极端的情况，就是标题不足两行。具体要看PM的需求，一是空出第二行的距离，二是让标题下边的元素顶上去。如果是第一种需求，有2种解决的方案。

1：把下边的元素都使用position:absoulte定位到固定的位置，不受标题行数影响。

2：把标题容器的高度写死，这样写必须要考虑行高的坑，因为容器高度写死以后，不同机型行高实际上显示效果不一样。

高度写少了，有的机型会这样。

写多了可能会这样。

我的做法是，不影响布局的情况下尽量控制line-height值大一些，行与行的间距变大，容器高度的设定需要多测试一些机型，控制文字不多出也不被挡住。

没有你要的吗？ 点击DIV CSS查找更多内容，或登录"问答平台"提交你问题。

CMS学习网() 部分文章来源于互联网，版权归属于原作者。本站所有转载文章言论不代表本站观点，如是侵犯了原作者的权利请发邮件联系站长 (442446040@qq.com)，收到后立即删除。