Как убрать лишению длину в таблице css или другим способом?

Question

[KodeKod]

Здравствуйте! Как сделать чтобы текст в таблице не переходил на новую строчку, а скрывался как на фото.

На скрине видно что текст уходит в другой слой.

Answer 1

[Рома Зварич]

1) Запрещаете перенос текстаwhite-space: nowrap;
2) Скрываете всё за границами объекта при переполненииoverflow: hidden;
3) Через псевдоэлемент создаёте "исчезновение" текста в конце строки

Результат:
https://codepen.io/hisbvdis/pen/OJLNPEP

Comments

[KodeKod]

Супер спасибо! Подскажите пожалуйста еще вопрос есть ) это способ для блока с фикс размером, а как сделать для таблицы, но учитывая что у кого то маленький экран, а к у кого то большой)

[Рома Зварич]

KodeKod, существуют определенные проблемы в работе свойства overflow: hidden в таблицах.

Чтобы оно заработало в таблице, нужно самой таблице <table> задать свойство table-layout:fixed; и явно задать ширину, например width: 100%;

Ячейкам также придется выставить явно размеры.

Пример
https://codepen.io/hisbvdis/pen/PoYNqOp

[KodeKod]

Спасибо! Решил вопрос)