如何实现首尾保留、中间用省略号截断文本以适配响应式容器？

针对你需要将长路由文本截断为「Sydney - ... - Quito」格式以适配动态宽度容器的需求，下面提供CSS和JavaScript两种解决方案：

CSS 方案（需调整HTML结构） #

纯CSS可以快速实现类似效果，但需要提前拆分文本结构，适合固定格式的路由内容：

修改后的HTML结构 #

<div class='container'>
  <p class='route'>
    <span class="route-start">Sydney -</span>
    <span class="route-middle">Doha - Singapur - Capetown</span>
    <span class="route-end">- Quito</span>
  </p>
</div>

对应的CSS样式 #

.container {
    background-color: hotpink;
    width: 200px;
    white-space: nowrap;
}

.route {
    display: flex;
    margin: 0;
    align-items: center;
}

.route-start, .route-end {
    flex-shrink: 0;
    margin: 0 6px;
}

.route-middle {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

该方案通过flex布局固定首尾部分的宽度，中间内容占满剩余空间，超出时自动显示省略号，完美匹配「X - ... - Y」的格式。

JavaScript 方案（无需修改原结构，动态适配） #

如果不想调整HTML结构，或者路由内容是动态生成的，JS方案可以实时计算容器和文本宽度，实现自适应截断：

保留原HTML结构 #

<div class='container'>
  <p class='route'>Sydney - Doha - Singapur - Capetown - Quito</p>
</div>

JavaScript 实现代码 #

// 核心截断函数
function truncateRoute(routeEl) {
    const originalText = routeEl.textContent.trim();
    const segments = originalText.split(' ').filter(s => s);
    
    // 文本长度不足时直接返回
    if (segments.length <= 4) return;

    const container = routeEl.parentElement;
    // 创建临时元素用于计算文本宽度
    const tempSpan = document.createElement('span');
    tempSpan.style.cssText = 'visibility:hidden; white-space:nowrap; position:absolute;';
    document.body.appendChild(tempSpan);

    // 先判断原文本是否超出容器
    tempSpan.textContent = originalText;
    if (tempSpan.offsetWidth <= container.offsetWidth) {
        document.body.removeChild(tempSpan);
        return;
    }

    // 构建首尾固定部分
    const start = `${segments[0]} ${segments[1]}`;
    const end = `${segments[segments.length - 2]} ${segments[segments.length - 1]}`;
    let truncated = `${start} ... ${end}`;

    // 检查简化后的文本是否仍超出容器，若超出则进一步简化
    tempSpan.textContent = truncated;
    if (tempSpan.offsetWidth > container.offsetWidth) {
        truncated = `${segments[0]} ... ${segments[segments.length - 1]}`;
    }

    routeEl.textContent = truncated;
    document.body.removeChild(tempSpan);
}

// 初始化执行
const routeElement = document.querySelector('.route');
truncateRoute(routeElement);

// 监听窗口 resize 事件，动态更新
window.addEventListener('resize', () => {
    // 先恢复原文本再重新截断，避免重复截断导致内容丢失
    routeElement.textContent = 'Sydney - Doha - Singapur - Capetown - Quito';
    truncateRoute(routeElement);
});

该方案会自动检测文本是否超出容器，动态生成符合要求的截断格式，并且支持窗口大小变化时实时适配。如果你的路由内容是动态加载的，只需在内容更新后调用truncateRoute函数即可。

内容的提问来源于stack exchange，提问作者four-eyes