ElementUI - Как сделать перенос слов: разбить слово в столбце el-table

Используя ElementUI, я хотел бы иметь возможность переносить текст в столбец с пробелами, а не в середине слова. Обычно вы применяете

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

В обычный столбец или в div с этим стилем, но при использовании ElementUI el-table и el-table-column это не имеет никакого эффекта. Я пробовал столбец el-table как класс и как стиль прямого применения, но ничего не меняется.

У кого-нибудь есть опыт выполнения этой работы?


javascript css element-ui
person Ross Coundon    schedule 20.10.2018    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Осмотрите элемент и проверьте, правильно ли установлены свойства. Должна быть проблема специфичности CSS других частей библиотеки.

Изменить, решение

Попробуйте поместить этот CSS в позицию после библиотеки CSS, это должно решить проблему.

.el-table .cell {
    word-break: break-word;
}
person Mattia Pontonio    schedule 20.10.2018
comment
Я просмотрел поставляемый CSS и даже изменил его, чтобы включить значения в вопрос, но он все еще не применяется. Поэтому прошу помощи - person Ross Coundon; 20.10.2018
comment
Я покопаюсь в этом, но в данный момент я не вижу способа сделать это. Я реализовал это как стиль с ограниченной областью в моем компоненте Vue, а также как стиль без области видимости в родительском компоненте, но он переопределяется, чтобы сломать все. Если я использую !important, это работает, но мне это кажется слишком хакерским. Я продолжу экспериментировать. Спасибо - person Ross Coundon; 20.10.2018
comment
Да я вижу. Я не могу сейчас установить и попробовать. Альтернативный подход не должен исправить ситуацию, поскольку в табличном представлении данные должны оставаться в одной строке для удобочитаемости. И менять библиотечные классы без него тоже нехороший подход. ИМХО - person Mattia Pontonio; 20.10.2018