文字超出显示省略号解决方案

### CSS 实现中间溢出并居中的方法 在标准的 `text-overflow: ellipsis` 使用场景下，通常是针对单行或多行文本从右侧截断的情况。然而，如果希望实现 **中间溢出** 并保持文本居中，则需要采用一些额外的技术手段来达到目标。 以下是具体的解决方案： #### 方法一：通过伪元素模拟中间省略号 可以通过使用两个部分分别控制首尾的内容，并利用伪元素插入省略号的方式实现中间溢出的效果[^6]。 ```css .container { position: relative; max-width: 200px; /* 设置容器的最大宽度 */ overflow: hidden; } .text::before, .text::after { content: attr(data-text); /* 动态获取原始文本内容 */ float: left; white-space: nowrap; overflow: hidden; } .text::before { z-index: 1; position: absolute; left: 0; clip: rect(0, 80px, 20px, 0); /* 调整可视区域大小 */ } .text::after { z-index: 1; position: absolute; right: 0; clip: rect(0, 20px, 20px, 120px); } .text span { display: inline-block; text-align: center; padding-left: 90px; /* 预留空间给前半部分内容 */ padding-right: 90px; /* 预留空间给后半部分内容 */ } ``` HTML 结构如下： ```html <div class="container"> <div class="text" data-text="这是一个非常长的文字用于测试中间溢出效果"><span>...</span></div> </div> ``` 这种方法的核心在于动态调整前后两部分的可见范围，并通过绝对定位和剪裁技术 (`clip`) 来隐藏多余的部分[^7]。 --- #### 方法二：借助 JavaScript 计算并替换中间内容 对于更复杂的场景，可以直接使用 JavaScript 对字符串进行切割，在指定位置插入省略号[^8]。 ```javascript function truncateMiddle(text, maxLength) { if (text.length <= maxLength) return text; const halfLength = Math.floor(maxLength / 2); const startText = text.slice(0, halfLength).trim(); const endText = text.slice(-halfLength).trim(); return `${startText}...${endText}`; } // 示例调用 const originalText = "这是一个非常长的文字用于测试中间溢出效果"; const truncatedText = truncateMiddle(originalText, 20); document.querySelector('.middle-truncate').textContent = truncatedText; ``` 对应的 HTML 和 CSS 如下： ```html <div style="width: 200px; text-align: center;" class="middle-truncate"></div> ``` 此方案适用于无法完全依赖纯 CSS 的复杂需求场合。 --- #### 方法三：基于 Flexbox 布局的变通方式 虽然传统意义上的 `text-overflow: ellipsis` 不支持中间溢出，但可以尝试结合 Flexbox 完成近似效果[^9]。 ```css .flex-container { display: flex; align-items: center; justify-content: space-between; max-width: 250px; margin: auto; border: 1px solid #ccc; padding: 5px; overflow: hidden; } .left-part, .right-part { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .middle-dot { margin: 0 10px; } ``` HTML 结构如下： ```html <div class="flex-container"> <div class="left-part">这是左侧文字</div> <span class="middle-dot">...</span> <div class="right-part">这是右侧文字</div> </div> ``` 这种方式适合于固定结构下的简单应用案例。 --- ### 总结 上述三种方法各有优劣，具体选择取决于实际项目的需求以及兼容性考虑。推荐优先尝试纯 CSS 解决方案（如方法一），但如果遇到极端情况或者需要更高的灵活性，则可引入 JavaScript 辅助逻辑（如方法二）。 ---