富文本包含块状元素p,div,图片元素和一些行级元素类似于这样
最后希望展示的样式如下
首先我们在父元素上尝试css多行效果(10行为例,其他如下) -webkit-line-clamp: 10;测试结果在pc上正常,但是在手机上会因为块级元素失去效果。
设置max-height呢?也不行,因为富文本还包含图片,间距等不确定因素,无法计算最大高度。
既然手机端因为块级元素失去效果,我们可以先把p和div的display:inline,强行转为行级元素,但是这样换行就会消失,所以我们可以使用正则在每个p和div的结尾加一个br标签强行换行。
在手机上测试了一下,功能ok,但是段落与段落之间的间距却消失了,这样也不符合产品和设计的要求。
行内元素之间应该要怎么加间距呢?试了很久之后终于想到了一个办法
先在父元素上给所有元素加一个行高line-height 再利用正则,除了为每个p和div结尾加一个br之外,再增加一个带font-size的空p标签,这样可以借助这个空p标签的font-size调整段落间距的高度。调整之后的代码如下。