文本超出

实现文本超出显示省略号（...）的方法

当文本内容超出容器宽度时，可以通过 CSS 或 JavaScript 实现显示省略号的效果。以下是几种常见的实现方式：

1. 单行文本溢出显示省略号

.ellipsis {
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 隐藏溢出内容 */
    text-overflow: ellipsis; /* 显示省略号 */
    width: 200px; /* 需要指定宽度 */
}

2. 多行文本溢出显示省略号（WebKit内核浏览器）

.multiline-ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 限制显示行数 */
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px; /* 可选，限制最大宽度 */
}

3. 使用 JavaScript 实现（兼容性更好）

function truncateText(element, maxLength) {
    const text = element.textContent;
    if (text.length > maxLength) {
        element.textContent = text.substring(0, maxLength) + '...';
    }
}

// 使用示例
const textElement = document.querySelector('.text');
truncateText(textElement, 50);

4. 响应式解决方案（结合 CSS 和 JS）

.responsive-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .responsive-ellipsis {
        max-width: 150px;
    }
}

5. 在 Vue/React 等框架中的实现

Vue 示例

<template>
    <div class="ellipsis" :title="fullText">
        {{ truncatedText }}
    </div>
</template>

<script>
export default {
    props: ['text', 'maxLength'],
    computed: {
        truncatedText() {
            return this.text.length > this.maxLength ? this.text.substring(0, this.maxLength) + '...' : this.text;
        },
        fullText() {
            return this.text;
        }
    }
};
</script>

<style>
.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;
}
</style>

6. 表格单元格中的文本省略

table td {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

注意事项

1. 宽度限制：必须为元素设置明确的宽度或最大宽度
2. Flex布局：在 flex 容器中，可能需要添加 min-width: 0 使省略号生效
3. 可访问性：考虑使用 title 或 aria-label 属性显示完整文本
4. 多行限制：-webkit-line-clamp 是非标准属性，主要在现代浏览器中支持

选择哪种方法取决于你的具体需求和浏览器兼容性要求。CSS 方案更简洁高效，而 JavaScript 方案则提供更多控制和更好的兼容性。