截断(truncate)样式不生效

[981377660LMT]

.column-sortable-list-item .text {
    width: 90px;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-right: 8px;
    white-space: nowrap;
    margin-left: 4px;
}

[981377660LMT]

触发条件：

1. 一定的宽度(width或者max-width)
2. truncate 类

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

[981377660LMT]

       .mtd-button-label {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          display: flex;
          align-items: center;
        }

为什么没有省略号？ 因为用了flex布局。 这段代码的目的是当 .mtd-button-label 内的文本超出其容器宽度时，显示省略号。但是，如果省略号没有显示，可能的原因有以下几点：

1. overflow: hidden;，white-space: nowrap; 和 text-overflow: ellipsis; 这三个属性需要一起使用，才能实现文本溢出显示省略号的效果。这段代码中已经包含了这三个属性。

2. display: flex; 可能会影响文本的溢出效果。因为 flex 容器默认会尽可能地展开其子元素，使其填充可用空间，这可能会阻止 text-overflow: ellipsis; 的效果。

3. .mtd-button-label 元素需要有一个明确的宽度或最大宽度。如果没有设置宽度或最大宽度，文本就不会溢出，因此也就不会显示省略号。

4. 如果 .mtd-button-label 的子元素也是一个 flex 容器，那么这个子元素可能会扩展以适应其内容，这也会阻止省略号的显示。

解决方法：

• 可以尝试移除 display: flex; 和 align-items: center;，或者给 .mtd-button-label 设置一个明确的 width 或 max-width。

• 如果 .mtd-button-label 的子元素也是 flex 容器，可以尝试给这个子元素设置 min-width: 0;。

[981377660LMT]

如果你想在使用 flex 布局的同时，也能显示省略号，可以尝试以下方法：

1. 在 .mtd-button-label 中添加一个子元素，例如 <span>，并将文本放在这个 <span> 中。

2. 将 overflow: hidden;，white-space: nowrap; 和 text-overflow: ellipsis; 这三个属性应用到这个 <span> 上，而不是应用到 .mtd-button-label 上。

3. 给这个 <span> 设置 min-width: 0;。

以下是一个示例：

.mtd-button-label {
  display: flex;
  align-items: center;
}

.mtd-button-label span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

然后在 HTML 中这样使用：

<div class="mtd-button-label">
  <span>这里是一段很长的文本，可能会超出容器宽度</span>
</div>

这样，当文本长度超出 .mtd-button-label 的宽度时，就会在 <span> 中显示省略号。

[981377660LMT]

总结： 用 <span className="truncate">{text}</span>，truncate 加在 span 上，并具有最大宽度/宽度。