Проблема заключается в том, чтобы разместить как можно больше текста по вертикали в дочернем без того, чтобы дочерний вышел за пределы родительского контейнера и не зная заранее объем оставшегося места в родительском контейнере.
Контейнер имеет фиксированную высоту и два дочерних элемента. Вот пример фрагмента HTML:
Название, оно должно вырасти настолько, насколько необходимо Некоторый текст, выходящий за пределы размера контейнера. Я хочу, чтобы этот текст был обрезан многоточием, когда контейнер «заканчивается». и соответствующая таблица стилей:
.container { ширина: 15рем; цвет фона: желтый; высота: 20рем; } .заголовок { размер шрифта: 200%; размер шрифта: 600; } .текст { переполнение текста: многоточие; граница: 2 пикселя, сплошная красная; } Первый дочерний элемент (заголовок) должен адаптировать свой размер к содержащемуся в нем тексту. Другой дочерний элемент должен использовать оставшееся вертикальное пространство, но оно не должно превышать фиксированную высоту своего родителя.
Этот jsfiddle показывает, чего я пытаюсь достичь.
Мне нужно решение только с CSS, Javascript невозможен. При необходимости я могу изменить структуру HTML.
РЕДАКТИРУЙТЕ после подсказок, чтобы добавить переполнение: скрыто в контейнер:
Поскольку сделать именно то, что мне нужно, кажется невозможным, я могу жить без многоточия, поэтому решение overflow: Hidden подойдет мне. Однако я пробовал это, но, похоже, это не работает:
Проблема заключается в том, чтобы разместить как можно больше текста по вертикали в дочернем без того, чтобы дочерний вышел за пределы родительского контейнера и не зная заранее объем оставшегося места в родительском контейнере.
Контейнер имеет фиксированную высоту и два дочерних элемента. Вот пример фрагмента HTML:
Название, оно должно вырасти настолько, насколько необходимо Некоторый текст, выходящий за пределы размера контейнера. Я хочу, чтобы этот текст был обрезан многоточием, когда контейнер «заканчивается». и соответствующая таблица стилей:
.container { ширина: 15рем; цвет фона: желтый; высота: 20рем; } .заголовок { размер шрифта: 200%; размер шрифта: 600; } .текст { переполнение текста: многоточие; граница: 2 пикселя, сплошная красная; } Первый дочерний элемент (заголовок) должен адаптировать свой размер к содержащемуся в нем тексту. Другой дочерний элемент должен использовать оставшееся вертикальное пространство, но оно не должно превышать фиксированную высоту своего родителя.
Этот jsfiddle показывает, чего я пытаюсь достичь.
Мне нужно решение только с CSS, Javascript невозможен. При необходимости я могу изменить структуру HTML.
РЕДАКТИРУЙТЕ после подсказок, чтобы добавить переполнение: скрыто в контейнер:
Поскольку сделать именно то, что мне нужно, кажется невозможным, я могу жить без многоточия, поэтому решение overflow: Hidden подойдет мне. Однако я пробовал это, но, похоже, это не работает:
Мобильная версия