单行和多行文字溢出省略
最近在做一个微信小程序的项目,遇到的一些移动端布局的问题,在此记录一下,防止踩坑。
单行文字溢出
首先是通用处理方案:
.text-ellipsis{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
但是如果配合 flex 布局同时作用于一个元素则会失效。
.recommend{
display:flex;
justify-center:center;
align-items:center;
}
.text-ellipsis{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
解决方案:在 flex 作用的元素内部加一层 span ,把 .text-ellipsis 添加到 span 元素里
多行文字溢出
通用处理方案 ( 只兼容webkit内核的浏览器,移动端基本上没问题 ) :
.multiline-ellipsis{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
white-space:normal !important;
word-wrap:break-word;
}
这个可以配合 flex 使用
但是,温馨提示,容器高度最好让他自己撑开,不然布局会出问题的。