Как сделать универсальную карточку?

Question

[caof19]

Здравствуйте, есть карточка в которой есть два параграфа, допустим название и описание, проблема в том, что содержимое у них может быть разное, то есть в названии может быть 3 строки и в описание 4-5, так и по одной, карточки стоят в ряд, но при адаптивности, могут встать и на другую строчку. Собственно вопрос: можно ли это реализовать как-то, то что-бы описание начиналось на одной линии со всем рядом без использования фикс высоты?

Comments

[Ankhena]

Пока, при такой структуре, только на js.

[NeKt0]

Тоже ищу ответ по этой теме. Хочется создать универсальные карточки, которые не будут "ломаться" при разном объёме контента. Если найдёшь свежее и семантичное решение - маякни, если не трудно.

Answer 1

[Арсений Матыцин]

В будущем (кажущемся пока весьма далеком) это можно будет решить на уровне сабгридов. Сейчас только если задействовать JS.
Дешевле прибивать описание к низу карточки посредством использования флексбоксов.

Comments

[caof19]

Я тоже думал про "прибивать к низу", но тогда описанием заканчивается на одной линии, а не начинается. Это вариант был бы прекрасен, если была уверенность, что в описании будет одинаковое кол-во строк

[Арсений Матыцин]

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

Пользователь, он пользователь, дай ему поле, он напишет от слова «юх» до романа в 5 томах и что ты будешь делать? Страдать. Вместо этого создавай разумные ограничения и подрезай строки на вывод (тоже разумно). Все попытки сделать архиуниверсально ничем хорошим еще не кончились.

Answer 2

[Vyach Gor]

когда клиент или тестировщик просит сделать что подобное, приходиться подключать js, так как одним лишь css тут не обойтись, к сожалению - я использую вот этот плагин - link, если не понравиться поищите более современные аналоги, так как этот давно не обновлялся

Answer 3

[forspamonly2]

вообще-то можно. через display: contents и order:

если у вас ширина задаётся как в примере, то даже с сохранением структуры.

Comments

[Ankhena]

После display: contents доступность улетает в трубу.

[forspamonly2]

почему? в разметке порядок элементов не менялся, читалки продолжают читать карточки по порядку, сначала заголовок, потом текст. во всяком случае микрософтовский narrator точно так делает.

[Ankhena]

forspamonly2, у меня нет ответа почему так получается, но наверное, можно погуглить.
Для начала посмотрите caniuse, там прямым текстом об этом написано.

[forspamonly2]

Ankhena, вы бы почитали что именно там написано, перед тем как громкие заявления делать. у вопрошавшего никаких унаследованных ролей ни на переставляемых дивках нет, ни у контейнера в котором они переставляются, так что никаких коллизий там быть не может.
ну и прямо скажем, пример, который они там приводят, высосан из пальца - никто так не делает. а если и приспичит кому, так он завсегда может роли руками прописать.

[Ankhena]

forspamonly2, да, вы правы. Сейчас в исходном коде дивы, которым вообще без разницы роли, семантика и всё такое.

Но вы же понимаете, что правильно такие штуки (типа карточек товаров в каталоге, для которых чаще всего такие вопросы и возникают) верстать списками.

И тут же видим:

spoiler

Есть еще одна проблема. Не будут работать стили для самих карточек, а дизайнеры любят задать им цвет, рамочки, теньки и т.д., а также повесить hover тоже на всю карточку.
Можно, конечно и по частям собирать. Но с ховером так уже не выйдет.

По мотивам всего этого лично я бы не стала использовать и рекомендовать своим студентам это свойство в настоящий момент.

Хотя не могу отрицать его привлекательность :)
И мне бы не хотелось, чтобы вы удаляли этот ответ.

[forspamonly2]

Ankhena, вообще-то можно и с ховером. правда разметку придётся изменить слегка.


рекомендовать кому-либо такое в любом случае нельзя, потому что всё завязано на вычисление ширины через calc, что само по себе неверно.

а вот насчёт того, чем правильно такие штуки верстать - это вопрос холиварный на самом деле.

там, где карточки - это основной контент (страница каталога и так далее), наверное правильнее секциями. и тут наверное можно роль секции повесить на текст, а заголовок прописать ему в aria-labeledby.

а если это какие-то дополнительные карточки (что вероятнее, судя по описанию в вопросе "карточки стоят в ряд"), то семантически правильнее их делать в виде списка определений (dl/dt/dd) и там display: contents вообще не нужен.

[Ankhena]

forspamonly2,

вообще-то можно и с ховером

да, это веселенький вариант. Чем больше блоков в ряду, тем веселее. Но тем не менее он есть.

а вот насчёт того, чем правильно такие штуки верстать - это вопрос холиварный на самом деле.

Угу, сначала знать бы что на самом деле у ТС.
Но мы не будем холиварить.

Думаю, что мы уже достаточно понаписали для развития кругозора у населения.
Спасибо.