JS+CSS实现长文本中间省略效果（文件名中间省略但不省略后缀名）

文本中间省略

1.纯CSS实现

• 原博客：https://juejin.cn/post/6966042926853914654
• 目的：文件名过长时中间省略但不省略文件后缀
• 实现关键：txt元素为不需要省略情况，即长度不需要换行，title元素为需要省略情况。利用相对定位，当txt元素不需要换行时，title元素在视图内；当txt元素需要换行时，title元素进行覆盖。title元素利用浮动将内容拆成两端，在对应宽度位置显示省略号
• 技术瓶颈：因为title采用覆盖的方式遮挡txt元素，当需要设置具备透明度颜色的悬停效果时将导致文字重叠，暂时找不到解决方法
• 具体实现：

//  html

    一段很长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长的文字
    一段很长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长的文字

// css
.wrap {
    position: relative;
    line-height: 2;
    height: 2em;
    padding: 0 10px;
    overflow: hidden;
    background: #fff;
    margin: 5px 0;
}
.title {
    display: block;
    position: relative;
    background: inherit;
    text-align: justify;
    height: 2em;
    overflow: hidden;
    top: -4em;
}

.txt {
    display: block;
    max-height: 4em;
}
.title::before{
    content: attr(title);
    width: 50%;
    float: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;
}

2.CSS+JS实现

• 目的：文件名过长时中间省略但不省略文件名
• 实现关键：利用js将文件名拆成两部分，弹性盒子内部对前部分进行省略
• 具体实现：

// html

    
    
        
         this.handleDownload(file)} class="file">
            {fileName}
            {postfix}
        
    
    {
        this.ctrlP.readonly ? null :  this.handleDelete(index)} />
    }

// js
const fileName = file.fileName.substring(0, file.fileName.lastIndexOf('.'))
const postfix = file.fileName.substring(file.fileName.lastIndexOf('.'))

// css
.name {
    display: flex;
    cursor: pointer;
    text-decoration: none;
    height: 40px;
    width: 100%;
    align-items: center;
    padding: 12px;
    .file {
        padding: 0 8px;
        display: flex;  // 限定为弹性盒子，否则溢出
        flex: 1;   // 限定弹性比例，否则宽度为0
        width: 0;  // 限定宽度，否则溢出
        .fileName {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
    }
}