CSS文本省略--iOS踩坑

最新推荐文章于 2024-08-02 12:09:11 发布

ZhouSiAn

最新推荐文章于 2024-08-02 12:09:11 发布

阅读量809

点赞数

文章标签： css ios 前端

本文链接：https://blog.csdn.net/ZhouSiAn/article/details/130300570

版权

背景：

vue中使用 v-html 展示的文本内容，要求超过两行省略。
下文方法是测试得出，仅供参考，有问题欢迎指出。

实现代码

// html
<div
    v-for="item in list"
    :key="item.id"
    class="rec-content"
>
    <span v-html="item.content" />
</div>

// css
.rec-content {
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-align: justify; // 所有行两端对齐
    text-justify: inter-ideograph; // 尾行居左
}

iOS手机展示问题一

使用上述代码约束文本内容超过两行省略后，当文本内容中含有html标签时，在iOS手机上会出现展示三行、甚至更多内容的情况。
解决方法：利用 line-height、max-height 进行高度约束，从而实现展示固定行。

// css
.rec-content {
    line-height: 1.5;
    max-height: 3em;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-align: justify; // 所有行两端对齐
    text-justify: inter-ideograph; // 尾行居左
}

iOS手机展示问题二

iOS手机会出现文本和省略号重叠的现象。此处证明了要使用文本省略必须先设置宽度，利用文本自动撑开区域实现文本省略不可靠。

文本与省略号重叠
解决方法：给文本所在div 设置一个固定的宽度。

// css
.rec-content {
    width: 320px;
    line-height: 1.5;
    max-height: 3em;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-align: justify; // 所有行两端对齐
    text-justify: inter-ideograph; // 尾行居左
}