移动端单行多行文字溢出省略

单行和多行文字溢出省略

最近在做一个微信小程序的项目，遇到的一些移动端布局的问题，在此记录一下，防止踩坑。

单行文字溢出

首先是通用处理方案：

.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 使用

但是，温馨提示，容器高度最好让他自己撑开，不然布局会出问题的。