CSS设置文本省略

在 CSS 中，可以使用 text-overflow、white-space 和 overflow 来配置文本省略（即当文本内容超过容器宽度时，显示为省略号 ...）。以下是实现单行和多行文本省略的配置方法。

1. 单行文本省略

要实现单行文本省略，可以使用以下 CSS：

.ellipsis {
    white-space: nowrap;        /* 禁止文本换行 */
    overflow: hidden;           /* 隐藏超出容器的文本 */
    text-overflow: ellipsis;    /* 使用省略号表示溢出的文本 */
}

示例

<div class="ellipsis" style="width: 200px;">
    This is a long text that should be truncated with an ellipsis...
</div>

2. 多行文本省略

要实现多行文本省略，可以使用以下 CSS。注意：这种方式可能需要结合 -webkit-line-clamp，这个属性在一些浏览器中可能有兼容性问题。

.multiline-ellipsis {
    display: -webkit-box;              /* 必须结合 display: -webkit-box; 用于多行文本省略 */
    -webkit-box-orient: vertical;      /* 设置盒子模型的方向为垂直 */
    -webkit-line-clamp: 3;             /* 显示的行数，超出的部分会被截断 */
    overflow: hidden;                  /* 隐藏溢出的内容 */
    text-overflow: ellipsis;           /* 使用省略号表示溢出的文本 */
}

示例

<div class="multiline-ellipsis" style="width: 200px;">
    This is a long text that spans multiple lines but should be truncated after three lines with an ellipsis...
</div>

3. 解释

• white-space: nowrap;：强制文本在一行内显示，禁止换行。
• overflow: hidden;：隐藏溢出的部分内容。
• text-overflow: ellipsis;：用省略号表示被截断的文本。
• display: -webkit-box;：配合 -webkit-line-clamp 实现多行文本省略。
• -webkit-box-orient: vertical;：设置盒子模型的方向为垂直，配合 display: -webkit-box 使用。
• -webkit-line-clamp: 3;：指定显示的行数，超出部分会被省略号截断。

4. 兼容性注意

• 多行文本省略使用的 -webkit-line-clamp 是 WebKit 私有属性，可能在非 WebKit 核心的浏览器中不兼容。
• 单行文本省略的方式具有广泛的浏览器支持。

5. 需要设置 width 的情况

在某些布局中，样式不起作用时，可能需要显式地设置 width。

感觉给width随便赋个值都行。

以下是一些常见情况：

情况 1: 父元素未正确定义 display: flex;

• 如果父元素未设置为 display: flex; 或者它的直接父元素未设置为 flex 容器，flex: 1; 将不起作用。

  解决方法：
  确保父元素已定义 display: flex;。

  .parent {
      display: flex;
  }
  

情况 2: flex-basis 与内容的宽度冲突

• flex: 1; 中的 flex-basis 默认值为 0%，如果子元素内容宽度大于 0%，且没有其他元素来共享空间，这可能导致 flex: 1; 看起来无效。

  解决方法：
  可以显式设置 width 或者设置 flex-basis 为 auto 以使其考虑内容大小。

  .child {
      flex: 1;
      width: 100%; /* 或者设置 flex-basis */
  }
  

情况 3: 父元素没有设置尺寸

• 如果父容器没有一个明确的尺寸（如没有设置 width 或 height），子元素的 flex: 1; 不会生效，因为没有可用空间供其扩展。

  解决方法：
  确保父元素有一个明确的 width 或 height，否则子元素无法根据 flex: 1; 自动扩展。

  .parent {
      display: flex;
      height: 100vh; /* 或者 width: 100% */
  }