Самый чистый способ создать таблицу в css, в которой один столбец не имеет явной ширины (но обертывает содержимое), а другие - с фиксированной шириной?
У меня есть две таблицы, каждая из которых занимает 50% экрана, обе выглядят одинаково. Каждая таблица содержит три столбца. Первый столбец не имеет явной ширины, которая занимает все доступное пространство. Два других столбца имеют фиксированную ширину независимо от размера экрана. Я хочу, чтобы содержимое третьего столбца было обернуто.
Я попытался использовать сетку для построения такой таблицы:
display: grid;
grid-template-columns: auto 80px 60px;
И я использую гибкость в первом столбце, например:
display: flex;
align-items: center;
flex-grow: 1;
flex-wrap: wrap;
Этот код хорошо работает, если содержимое первого столбца не переполняется, однако содержимое будет переполняться, если содержимое первого столбца слишком длинное (возможно, потому, что flex-wrap не будет работать без явной ширины, но Мне нужен первый столбец (без явной ширины) с завернутым содержимым, чтобы заполнить оставшееся пространство).
Мне интересно, если это должно быть достигнуто с помощью гибкости / таблицы / сетки, и как обрабатывать первый столбец (возможно ли это?) с помощью css.
Вот два изображения таблиц на разных экранах (первый экран меньшего размера, второй экран большего размера)
Я уже использовал flex-grow в первом столбце, он занимает все доступное пространство, но не обертывает содержимое
@BlunderingPhilosopher Боже мой, вот и все !! По-видимому, сетка пыталась разорвать линию с пробелом, но мой контент не содержит пробела. Так что здесь ответственность берет на себя перенос слов. Спасибо!
Нет проблем! word-break тоже недавно спас мой проект, ха-ха, это волшебное свойство;)
@BlunderingPhilosopher разве вы не конвертируете свой комментарий в ответ? Так что каждый может легко увидеть хороший подход.
@gazdagergo Я мог бы, но OP уже добавил его в качестве ответа, поэтому он / она может получить очки, ха-ха
@BlunderingPhilosopher Пожалуйста, оставьте ответ ниже, чтобы я мог дать вам очки, которых вы заслуживаете. После этого я удалю свой ответ. :)
Спасибо @Andus :)
Ответы 1
Я бы рекомендовал использовать word-break, чтобы «установить, появляются ли разрывы строк там, где текст в противном случае переполнял бы его поле содержимого».
Доступно ценности:
normal- «Использовать правило разрыва строки по умолчанию».break-all- «Чтобы предотвратить переполнение, между любыми двумя символами следует вставлять разрывы слов (за исключением текста на китайском / японском / корейском языках)».keep-all- «Разрывы слов не должны использоваться для текста на китайском / японском / корейском (CJK). Поведение текста, отличного от CJK, такое же, как дляnormal».break-word- «Чтобы предотвратить переполнение, обычно неразрывные слова могут быть разорваны в произвольных точках, если в строке нет других приемлемых точек разрыва».
Примечание из документов:
In contrast to
word-break: break-wordandoverflow-wrap: break-word,word-break: break-allwill create a break at the exact place where text would otherwise overflow its container (even if putting an entire word on its own line would negate the need for a break).
Может быть, использовать
flexgrow?