文本超出

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

当文本内容超出容器宽度时，可以通过 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 方案则提供更多控制和更好的兼容性。