CSS はテキストの途中に省略記号を実装します

図に示すように、テキストの中央に楕円が表示されます。

1. 需要

本文中に接尾辞が含まれる場合、長さを超える場合は接尾辞とその前を表示し、途中に省略記号を表示するように製品では要望があるかもしれません。

2. 解決策のアイデア

現在の module に2 つの新しいdom要素を作成しprev、nextstringsliceメソッドを使用してインターセプトできます。

3. コードの実装

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. 分析

• parentclass は親要素です
• 要素の長さstrArrが文字列が分割されます。-6 に従って分割し、flexレイアウト用の親モジュールと 2 つのサブモジュールを追加します。1 つ目はオーバーフロー省略記号の表示を設定し、2 つ目は Set行折り返しなし
• 長さが 10 を超えない場合、操作は実行されません。