ElementUI - 如何在 el-table-column 中实现文字换行: break-word

Question

使用ElementUI，我希望能够在空格处而不是单词中间换行文本。通常情况下，您需要应用CSS属性：word-break: break-all;

white-space: normal;
word-wrap: break-word;

在普通列中，可以将文字包装在div中并应用样式。但是，当使用ElementUI的el-table和el-table-column时，它没有任何效果。我尝试将其作为类或直接应用样式到el-table-column上，但都没有改变。

有人有使这个工作的经验吗？

- Ross Coundon

Answer 1

检查元素并确认属性设置正确。 可能是库中其他部分的 CSS Specificity 的问题。

编辑，解决方案

尝试将此 CSS 放置在 CSS 库后面，应该可以解决问题。

.el-table .cell {
    word-break: break-word;
}

- user3579536

---

我已经检查了已发布的 CSS，甚至修改了它以包含问题中的值，但仍未应用。因此请求帮助。 - Ross Coundon

我会深入研究这个问题，但目前我还看不到解决方案。我已经在我的Vue组件中实现了作用域样式，并在父级中实现了非作用域样式，但它被覆盖为break-all。如果我使用!important，它可以工作，但那感觉太过hacky了。我会继续尝试实验。谢谢。 - Ross Coundon

好的，我明白了。我现在无法安装并尝试。另一种方法应该是不修复该问题，因为在表格视图中，数据应该保持在一行中以提高可读性。而且，在没有解决方案的情况下更改库类也是一个不好的方法。依我之见。 - user3579536