Как сделать текст в 2 строчки css

Принудительно отображать текст в две строки из CSS

У меня проблема css, которая кажется очень простой. У меня есть текст, как вы можете видеть ниже: «Большие идеи. Постоянная ценность».

enter image description here

Когда я нахожусь на мобильных устройствах, мне нужно отобразить этот текст в две строки. Я перепробовал много возможностей, но ни одна из них не сработала для меня.

Я попытался поставить для элемента h3:

Я пытался установить

Но ничего из этого не помогло мне. У вас есть идеи, что я могу попробовать? Проблема в том, что мне нужно решить эту проблему с помощью CSS. Мне нужен текст в две строки только в мобильном представлении. Спасибо!

CSS от А до Я: работа с висячими строками и разрывами

CSS от А до Я: работа с висячими строками и разрывами

От автора: приветствую вас в нашей серии уроков CSS от А до Я! В этой серии я расскажу вам про CSS значения и свойства, начинающиеся с различных букв алфавита. Иногда обучающего ролика бывает недостаточно, и в этой статье я дам вам пару быстрых советов о том, как использовать разрывы строк и стараться не допускать появления висячих строк.

W значит висячие строки и разрывы

Термин висячая строка описывает одинокое слово в конце параграфа или заголовка.

Такие слова появляются, когда последнее слово в строке перепрыгивает на новую, потому что оно не вместилось по ширине.
Намного лучше визуально иметь хотя бы два слова на последней строке. Люди зачастую не хотят оставлять на строке по одному слову. Агентство, на которое я работал, подходило к этому вопросу настолько педантично, что у меня появилось навязчивое желание проверить еще раз не столько текст, сколько заголовки на отсутствие висячих строк.

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

Старайтесь не использовать тег br для принудительного разрыва строки

С помощью HTML тега мы можем принудительно поставить разрыв строки и перенести текст на новую строку.

Оберните текст только в две строки внутри div

Я хочу обернуть текст только в две строки внутри div определенной ширины. Если текст выходит за пределы двух строк, я хочу показать elipses. Есть ли способ сделать это с помощью CSS?

9 ответов

ограничение вывода двумя строками текста возможно с помощью CSS, если вы установите line-height и height элемента и set overflow:hidden; :

кроме того, вы можете использовать CSS text-overflow и white-space свойства для добавления многоточий, но это работает только для одной строки.

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

лучший, который я видел, который является только CSS и отзывчивым, происходит от Mobify Developer Blog — CSS Ellipsis: как управлять многострочным Эллипсисом в чистом CSS:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *