Как можно оптимизировать перенос текста с нижним подчеркиванием?

Question

[Максим]

Как можно оптимизировать перенос текста с нижним подчеркиванием?
У меня здесь названия файлов с нижним подчеркиванием как-то нелепо вставляются, как можно оптимизировать перенос слова на новую строку в таких случаях?

Answer 1

[Михаил]

Я бы так сделал https://codepen.io/notiv/pen/gOrEBZa
Разделил бы название файла на части и левую уже резал при сужении блока

Comments

[Максим]

Слушайте, да! Хорошее решение! Благодарю!
Только я понимаю, мне нужно скрипт этого отрезания написать. Так как названия скриптом подгружаются, а не руками.

[Михаил]

Максим, крестик тоже на одном уровне с текстом

Answer 2

[Надим]

Оберните название файла в блок и примените к нему стиль:
word-break: break-all;
Желательно блок выделить немного изменив фоновый цвет.

Если не нравится, то еще можно так:
text-overflow: ellipsis;

Comments

[Максим]

Спасибо! А иконку крестик вы бы в этот же блок внесли или оставили бы отдельно?

[Надим]

Максим, я бы крестик просто сделал фоном или в виде псевдоэлемента.

[Михаил]

Надим Закиров, сасем шоль? Это кнопка удаление файла