javascript - ElementUI - How to Word wrap: break-word in el-table-column - Stack Overflow

admin管理员组

文章数量:1296301

Using ElementUI I'd like to be able to wrap the text in a column on whitespace rather than in the middle of a word. Normally you'd apply

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

To the in a normal column, or wrap in a div with that styling but when using ElementUI el-table and el-table-column it doesn't have any effect. I've tried on the el-table-column as a class and as a direct applied style but nothing changes.

Does anyone have any experience of making this work?

Using ElementUI I'd like to be able to wrap the text in a column on whitespace rather than in the middle of a word. Normally you'd apply

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

To the in a normal column, or wrap in a div with that styling but when using ElementUI el-table and el-table-column it doesn't have any effect. I've tried on the el-table-column as a class and as a direct applied style but nothing changes.

Does anyone have any experience of making this work?

• javascript
• css
• element-ui

Share Follow asked Oct 20, 2018 at 13:28 Ross CoundonRoss Coundon 91711 gold badge1212 silver badges2020 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

Inspect the element and check if the properties are correctly set. Should be a problem of CSS Specificity from other parts of the library.

Edit, solution

Try to put this CSS in a position that is after the CSS library, it should fix the problem.

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

本文标签： javascriptElementUIHow to Word wrap breakword in eltablecolumnStack Overflow