记录一次JS 实现多行文本溢出

2024-05-17 09:22:58 浏览数 (2)

背景:UED给的设计稿要求。需要实现多行文本溢出省略号的样式。

记录一次JS 实现多行文本溢出记录一次JS 实现多行文本溢出
  • 原以为是一个简单的小需求, 框框直接上手。代码如下
代码语言:javascript复制
<template>
<div class="name-wrap">
    <span class="tag bd">
         我是标签
    </span>hhhhhhhhhhhhhhhhhhhh
</div>
</template>
<style>
.tag {
    dispaly: inline-block;
}
.name-wrap {
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
</style>
  • 一切看起来都是嘎嘎完美,虽然我知道这么写是有兼容问题的,但这个不是我这次关注的点。重点在于,我还有一个标签,在大部分手机下都能实现我想要的样式。但是在高版本的ios(iphone14、iphone15)下,他会默认成单行文本溢出省略号 。我了解到原因是-webkit-line-clamp属性的工作原则需要其容器是块级元素或至少表现得像一个块级元素。 所以我猜测,有没有可能在高版本的ios中,这个属性实现方式有所调整

    0 人点赞