0

подскажите, можно ли с помощью css/html без привлечения js реализовать следующее:

есть блоки div одинаковой высоты, но разной ширины (в зависимости от содержащегося в них текста) - по сути это "строковые теги", типа [мама] [папа] [братишка] [сестренка]

когда тегов много, то они могут занимать несколько строк, типа

[мама] [папа] [братишка]
[сестренка] [бабушка]
[дедушка] [жучка] [внучка]

можно ли ограничить вывод тегов некоторой максимальной шириной, так чтобы МАКСИМУМ выводилось 2 строки (если тегов хватает только на 1 строку - выводится 1 строка тегов)

P.S.

более сложный вопрос - если это возможно, то можно ли это как-то засекать (пусть и с использованием js), чтобы в таком случае выводить дополнительный тег/развертку

[мама] [папа] [братишка]
[сестренка] [бабушка] [...]

P.P.S.

конечно все это можно реализовать через подсчет длины слов внутри тегов и т.д., т.е. с использованием JS, но встал вопрос - можно ли это как-то сделать без оного

4
  • 1
    max-height, не? 27 июл 2022 в 10:32
  • да, такой вариант работает, недостаток - отсекает остальные ряды и никак это не увидеть, а хотелось бы конечно дополнительно добавить элемент, показывающий, что произошла "свёртка" элементов
    – Zhihar
    27 июл 2022 в 11:02
  • @Zhihar может еще добавить text-overflow (добавляет троеточие в конец обрезанного текста) 27 июл 2022 в 11:52
  • @АлександрСычёв, но это работает только, если строка одна. 27 июл 2022 в 12:00

1 ответ 1

0

CSS стили...

overflow: visible; ---> Отображается все содержимое элемента, даже за пределами установленной высоты и ширины.

overflow: hidden; ---> Отображается только область внутри элемента, остальное будет скрыто.

overflow:scroll; ---> Всегда добавляются полосы прокрутки.

overflow: auto; ---> Полосы прокрутки при необходимости.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.