###
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(&#
39;.middle
-truncate&#
39;).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 辅助逻辑（如方法二）。
---
本文介绍如何使用 CSS3 的 Flex 布局实现当文字超出容器时显示为省略号的效果。通过设置 min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 实现了文本的自动截断并附带省略号。
扫一扫
1839
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
