如何使用纯CSS实现中间省略号

· 2024-06-12 · # Css

在前端开发中，我们经常需要处理文本溢出的问题。对于长文本，通常会使用省略号来表示被截断的部分。Google了半天基本上都是两种方案

使用js+css算字数的方案：对于动态宽度的自适应不太满足💔
direction: rtl; 文字倒序的方案：半年之后再看这段代码我都不知道是做什么的💔

下面是我的flex方案，期望对你有用。

纯CSS实现中间省略号

首先，让我们来看一下如何使用CSS实现中间省略号。
主要是使用了flex的两个属性 flex-grow和flex-shrink，左边可缩小不可以放大，右边可放大不可缩小。

以下是一个SCSS代码片段：

.title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
        flex-grow: 0;
        flex-shrink: 1;

        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }

    .right {
        flex-grow: 1;
        flex-shrink: 0;
    }
}

实例展示

为了更好地理解这个CSS代码的效果，我们来看看三个不同的示例。

样式1：只有左半边，行尾省略号

<View className={classes.title}>
    <View className={classes.left}>
        上海虹口龙之梦店上海虹口龙之梦店上海虹口龙之梦店上海虹口龙之梦店
    </View>
</View>

样式2：左边+右边也占不满一行的情况

<View className={classes.title}>
    <View className={classes.left}>
        北京市
    </View>
    <View className={classes.right}>
        有41家门店
    </View>
</View>

样式3：左边+右边大于一行要保证右边完整展示

<View className={classes.title}>
    <View className={classes.left}>
        阿坝藏族羌族自治州
    </View>
    <View className={classes.right}>
        有1家门店
    </View>
</View>

结语

代码比较简单上手，比上面的那两种方案实用。半年之后回来再看代码也看得懂。
✨