如图，实现文本中间出现省略号；

一、需求

可能会有这种需求：当文本包含后缀名的时候，产品要求当超出长度时，展示后缀名和前面部分，中间出现省略号

二、解决思路

可以在当前模块中新建两个 dom 元素，prev 与 next，使用字符串 slice 方法进行截取

三、代码实现

1. tsx 代码

/*
 * @Author: risheng
 * @Date: 2022-06-16 14:16:31
 * @LastEditTime: 2022-06-16 14:31:05
 * @Description:  
 * @FilePath: /vite-project/src/modules/testEllipsis.tsx
 */
import React, {
    
     useState } from 'react';
import '../less/index.less';
export const Ellipsis = () => {
    
    
    const [strArr] = useState<string[]>(['1655360455000.jpeg', '20220616.jpeg', 'test.png', '这是测试字符串.png', '点赞.png']);
    return (
        <div className='parent-top'>
            {
    
    
                strArr.map((item: string) => {
    
    
                    return (
                        <div className="parent">
                            {
    
    
                                item.length > 10
                                ? (
                                    <div className='parent-main'>
                                        <span className='prev-span'>{
    
    item.slice(0, -6)}</span>
                                        <span className='next-span'>{
    
    item.slice(-6)}</span>
                                    </div>
                                )
                                : item
                            }
                        </div>
                    )
                })
            }
        </div>
    )
}

2. Less 代码

.parent{
    
    
    width: 100px;
    height: 36px;
    line-height: 36px;
    margin: 0 auto;
    text-align: left;
    border: 1px solid;
    margin-bottom: 20px;
    .parent-main{
    
    
        width: 100%;
        height: 36px;
        display: flex;
        overflow: hidden;
        .prev-span{
    
    
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .next-span{
    
    
            display: block;
            white-space: nowrap;
        }
    }
}

3. 解析

• parent 类是父元素
• 当 strArr 中的元素长度超过 10 时，对字符串进行切分，我这边按照 -6 进行切分，新增一个父模块，进行 flex 布局，两个子模块，第一个设置溢出省略号展示，第二个设置不换行
• 长度不超出 10 时，不进行操作