Как ограничить текст по ширине html
Узнайте, как ограничить ширину текста на веб-странице с помощью HTML. Научитесь применять стили CSS, такие как max-width и word-wrap, чтобы создать читабельный и эстетичный контент. Улучшите опыт пользователей, ограничивая длинные строки текста и обеспечивая более удобное чтение.
Веб-страницы с широким текстом могут быть неудобными для пользователей. При чтении такого контента глаза приходится перемещать горизонтально, что вызывает дискомфорт. Чтобы сделать прочтение более комфортным, можно ограничить ширину текста на веб-странице. В данной статье мы рассмотрим несколько способов, как это можно сделать с помощью HTML и CSS.
Одним из простейших способов ограничить ширину текста является использование тега с заданной шириной. Этот тег позволяет создать блок с определенными размерами, в котором будет размещен текст. Например, чтобы сделать текстовый блок шириной 500 пикселей, можно использовать следующий код:
Если вам необходимо сделать текстовый блок, который будет автоматически изменять свою ширину в зависимости от размера окна браузера или устройства, вы можете использовать относительные значения ширины. Для этого можно указать ширину блока в процентах. Например, чтобы сделать блок, занимающий 50% ширины окна браузера, можно использовать следующий код:
Если вам нужно ограничить ширину текста на уровне отдельных абзацев или других элементов текста, вы можете использовать тег с указанием максимальной ширины в свойстве CSS max-width. Например:
Также можно использовать свойство CSS overflow, чтобы скрыть часть текста, которая не помещается в заданную ширину. Если задать это свойство со значением «auto», то будет добавлены вертикальные и/или горизонтальные полосы прокрутки, позволяющие просмотреть всё содержимое. Например, чтобы ограничить ширину текста на 500 пикселей и добавить полосу прокрутки по горизонтали при необходимости, можно использовать следующий код:
Как ограничить ширину текста в HTML при верстке: основные принципы
При создании веб-страницы в HTML важно учитывать ограничения ширины текста, чтобы обеспечить удобное чтение и улучшить визуальное восприятие контента. Ограничение ширины текста может быть полезно, особенно при работе с большим объемом информации или при создании адаптивного дизайна.
Один из способов ограничить ширину текста в HTML — использование таблиц. Создайте таблицу с одной ячейкой и задайте ей фиксированную ширину с помощью атрибута «width». Например,
Что такое перевернутая а в математике и как ее читать
ОтзывыАлексей ИвановЯ часто сталкиваюсь с проблемой слишком широкого текста при чтении статей в интернете. Это может быть довольно неприятно для глаз и затруднять восприятие информации. Поэтому я ищу способы ограничить ширину текста в HTML. Статья, которую я прочитал, предлагает несколько полезных советов и инструкций по этому вопросу. Она рассказывает о свойстве CSS «max-width», которое позволяет задать максимальную ширину блока с текстом. Автор также рекомендует использовать отступы и выравнивание текста по центру, чтобы сделать его более удобным для чтения. Я с удовольствием попробую эти рекомендации и надеюсь, что они помогут мне справиться с проблемой широкого текста. Спасибо за полезную информацию!ИгорьСтатья очень полезная, особенно для тех, кто занимается веб-разработкой. Я часто сталкиваюсь с проблемой широкого текста на своем сайте, и эта статья дала мне много полезной информации. Теперь я знаю, как ограничить ширину текста в HTML, чтобы он выглядел более читабельным и удобным для пользователей. Особенно мне понравились примеры кода и подробные инструкции, которые помогли мне разобраться в этой теме. Также статья содержит много полезных советов, которые я непременно применю на практике. Спасибо автору за четкое и понятное изложение материала!АлександрСтатья очень полезная и информативная. Я давно хотел узнать, как ограничить ширину текста в HTML, и эта статья помогла мне разобраться. Теперь я знаю, что можно использовать CSS свойство max-width, чтобы задать максимальную ширину блока текста. Это очень удобно, потому что позволяет создавать читаемый и эстетичный контент, не допуская размытия и переноса слов. Также статья дает советы по выбору оптимальной ширины текста и приводит примеры кода. Очень рекомендую эту статью всем, кто хочет создавать качественный контент на своих веб-страницах!Alex123Очень интересная и полезная статья! Я часто сталкиваюсь с проблемой широкого текста на веб-страницах, и раньше не знал, как с ней бороться. С помощью ваших советов я научился ограничивать ширину текста в HTML, что значительно улучшило внешний вид моих сайтов. Теперь текст не выходит за границы экрана и легко читается. Особенно приятно, что вы предоставили примеры кода и объяснили, как использовать CSS свойство «max-width». Я уже применил эти знания на практике и убедился в их эффективности. Большое спасибо за полезную информацию! Жду с нетерпением новых статей от вас.Дмитрий СмирновСтатья очень полезная! Я часто сталкиваюсь с проблемой слишком широкого текста, который трудно читать. Было бы замечательно узнать, как ограничить ширину текста в HTML. Подсказки и инструкции, предложенные в статье, являются отличными решениями для этой проблемы. Особенно понравилась идея использовать CSS-свойство «max-width». Это простой и эффективный способ сделать текст более удобочитаемым. Теперь я знаю, как создать стили для ограничения ширины текстового блока и применить их к своему сайту. Большое спасибо за такую полезную статью!
Как ограничить текст по ширине html
Когда, пользуясь возможностями CSS, создают макет страницы, важно учитывать то, что в различных элементах этой страницы могут выводиться короткие и длинные текстовые материалы. Страницы, кроме того, нужно тестировать на предмет того, как они отображают тексты разной длины. Если разработчик чётко понимает то, как обрабатывать различные тексты, выводимые на странице, если он соответствующим образом спроектировал макет, это способно избавить его от множества неприятных неожиданностей.
Есть много ситуаций, в которых изменение некоего текстового фрагмента путём добавления или удаления всего одного слова способно заметно изменить внешний вид страницы, или, что ещё хуже «поломать» макет и сделать невозможной нормальной работу с сайтом. Когда я только начинал изучать CSS, я недооценивал последствия, к которым может привести добавление единственного слова в некий элемент или удаление из него всего одного слова. Здесь я хочу поделиться различными способами обработки текстов разной длины средствами CSS.
Обзор проблем
Прежде чем я расскажу о том, как работать с текстами средствами CSS, мне хотелось бы остановиться на проблемах, связанных с выводом текстов. Предположим, у нас есть вертикальное меню.
Вертикальное меню при переносе имени пользователя на вторую строку выглядит необычно
В начале меню выводится имя пользователя. Длина имени может варьироваться. Особенно — если речь идёт о мультиязычных сайтах. В правой части вышеприведённого примера видно, что имя пользователя, при достижении им определённой длины, занимает две строки. По этому поводу можно задаться несколькими вопросами:
- Нужно ли в такой ситуации обрезать текст?
- Нужно ли размещать текст в нескольких строках? Если да — то каково максимальное количество таких строк?
Слово вышло за пределы контейнера
Фронтенд-разработчик должен быть готов к такому, заранее приняв решение о том, как страница должна вести себя в подобных ситуациях. К счастью, существуют CSS-свойства, созданные специально для того чтобы решать подобные проблемы.
Кроме того, проблемы на страницах могут вызывать не только слишком длинные, но и слишком короткие тексты. Вывод короткого текста в элементе, не рассчитанном на такой текст, может либо «сломать» интерфейс, либо, как минимум, сделать так, что этот элемент будет странно выглядеть. Вот пример.
Кнопка, в которой выводится слишком короткий текст, выглядит необычно
Проблема тут в том, что кнопка, в которой выводится текст Ok , оказывается очень короткой. Я не говорю о том, что это — страшная проблема, но выглядит подобная кнопка не очень хорошо. Её, к тому же, в определённых ситуациях, может быть сложно найти на странице.
Что делать? Возможно, стоит настроить свойство кнопки min-width . Благодаря этому она сможет нормально выводить подписи разной длины.
Как видите, проблемы могут возникать как при выводе длинных, так и при выводе коротких текстов. Но, прибегнув к некоторым возможностям CSS, мы можем, по меньшей мере, ослабить влияние этих проблем на внешний вид и работоспособность страниц.
Длинные тексты
Теперь, когда мы обсудили проблемы, поговорим о возможностях CSS, которые позволяют наладить нормальную работу с длинными текстами.
▍Свойство overflow-wrap
Свойство overflow-wrap позволяет сообщить браузеру о том, что он должен разорвать слово, перенеся его на новую строку, в том случае, если слово не помещается в контейнер.
Без использования свойства overflow-wrap слово выходит за пределы контейнера
▍Свойство hyphens
Значение auto CSS-свойства hyphens позволяет сообщить браузеру о том, что он должен самостоятельно принять решение о разделении длинных слов с использованием дефиса и о переносе их на новые строки. Это свойство может принимать и значение manual , что позволяет, используя особые символы, предусмотреть возможность и порядок переноса слова на новую строку в том случае, если в этом возникнет необходимость.
Без использования свойства hyphens браузер не переносит слово на новую строку
Применяя значение auto свойства hyphens важно помнить о том, что браузер будет переносить любое слово, которое не помещается в строку. Что это значит? Взгляните на следующий рисунок.
Браузер может использовать знак переноса в любом слове
Обратите внимание на то, что браузер использовал знак переноса в слове, которое вполне может быть целиком перенесено на новую строку. При использовании свойства hyphens: auto браузер способен разрывать даже такие слова, которые не выходят за пределы контейнеров.
▍Обрезка однострочного текста
При обрезке текста, для вывода которого предусмотрено поле, вмещающее лишь одну строку, предложение укорачивается, а в его конец добавляется многоточие, указывающее на то, что текст, на самом деле, длиннее того фрагмента, который выведен на экране.
Слева — однострочный текст, при выводе которого обрезка не используется. Справа — текст, при выводе которого используется обрезка
В CSS нет свойства, которое могло бы называться «text-truncation», применимого для настройки автоматической обрезки текстов. Тут нам понадобится комбинация из нескольких свойств:
▍Обрезка многострочного текста
Если нужно обрезать текст, для вывода которого предусмотрено поле, вмещающее несколько строк, нужно прибегнуть к CSS-свойству line-clamp :
Для того чтобы это сработало, необходимо использовать и свойство display: -webkit-box . Свойство -webkit-line-clamp позволяет указать максимальное количество строк, по достижении которого текст надо обрезать.
Сравнение обрезки однострочного и многострочного текста
Минус этого подхода заключается в том, что, если у элемента будет настроено свойство padding , нормальный вывод текста может быть легко нарушен. Настройка этого свойства приведёт к тому, что часть текста, которая, как ожидается, должна быть скрыта, окажется выведенной после обрезанного текста.
Настройка свойства padding приводит к нарушению вывода текста
▍Вывод длинных текстов в полях, поддерживающих горизонтальную прокрутку
В некоторых ситуациях непрактично организовывать разрыв слов или их перенос на новые строки с использованием дефиса. Например, если имеется поле, в котором должен выводиться фрагмент JavaScript-кода, такой код будет тяжело читать в том случае, если слова будут выводиться с переносом на новые строки. В подобном случае облегчить работу с текстом можно, предусмотрев возможность горизонтальной прокрутки содержимого поля.
Поле, в котором осуществляется перенос слов на новые строки, и поле, в котором применяется горизонтальная прокрутка
▍Свойство padding
В некоторых случаях, когда у элемента не настроено свойство padding , вспоминают об этом лишь встречаясь с проблемами, появляющимися при выводе данных на страницах. Взгляните на следующий пример.
Проблема при выводе подписи к флажку
Тут имеется набор флажков. Подпись одного из них выводится слишком близко к другому. Причина этого заключается в том, что при проектировании макета, используемого для вывода флажков, не настроены промежутки между ячейками сетки, в которых размещены данные. Этот пример, кстати, взят с реального сайта (Techcrunch).
Короткие тексты
Я знаю о том, что проблемы, связанные с короткими текстами распространены не так сильно, как проблемы, связанные с длинными текстами. Но возможность их возникновения, всё равно, очень важно учитывать при проектировании пользовательских интерфейсов.
▍Установка минимальной ширины элемента
Кнопка, в которой выводится слишком короткий текст
Как справиться с проблемой, возникающей при выводе на кнопке очень короткой надписи? Решить эту проблему можно, воспользовавшись свойством min-width . При таком подходе ширина кнопки, даже при выводе в ней короткой надписи, не будет меньше заданного значения.
Результаты настройки минимальной ширины кнопки
Теперь, когда мы поговорили о проблемах вывода длинных и коротких текстов и о решениях этих проблем, давайте разберём несколько практических примеров.
Практические примеры
▍Карточка профиля пользователя
Карточки профиля пользователя часто содержат достаточно длинные тексты. В частности, проектируя подобную карточку, разработчику почти невозможно заранее узнать о том, насколько длинным будет имя пользователя. Как же быть?
Имя пользователя обычной длины, помещающееся на карточке целиком. Обрезанное длинное имя, выводимое в одной строке. Обрезанное длинное имя, выводимое в нескольких строках
Проектируя подобную карточку можно подготовиться к выводу в ней длинного имени пользователя, применив один из следующих двух приёмов:
Как видите, длинный текст можно обрезать, выведя его либо в одной строке, либо — в нескольких строках.
▍Навигационные элементы
При работе над макетами мультиязычных сайтов нужно учитывать тот факт, что тексты, имеющие один и тот же смысл, но написанные на разных языках, могут иметь различную длину.
Названия навигационных элементов, выведенные на разных языках
Длина слова About из LTR-языка больше, чем длина аналогичного по смыслу слова из RTL-языка. При выводе на таком языке соответствующий пункт навигационного меню выглядит слишком коротким. Известно, что если в дизайне страниц используются маленькие области, с которыми нужно взаимодействовать пользователям, это плохо сказывается на UX. Как исправить проблему? В данном случае можно просто настроить минимальную ширину навигационного элемента:
Решение проблемы короткого текста
Если вас интересуют вопросы вывода данных на разных языках — взгляните на этот мой материал.
▍Поле для вывода содержимого статей
В полях для вывода объёмных текстов вполне могут попадаться очень длинные слова, не помещающиеся в контейнеры. Особенно часто с этим можно столкнуться при работе с сайтами на мобильных устройствах.
Длинное слово выходит за пределы контейнера
Здесь имеется длинное слово, которое выходит за пределы контейнера и является причиной появления горизонтальной полосы прокрутки. Выше мы уже говорили о решениях подобных проблем, которые заключаются в использовании CSS-свойств overflow-wrap или hyphens .
Например, эту проблему можно решить так:
▍Оформление виртуальной корзины для покупок
Названия товаров, которые покупатели интернет-магазинов «кладут» в корзины, могут быть очень разными. Это может быть и одно слово, и несколько строк. В следующем примере длина названия товара такова, что текст перекрывается кнопкой для удаления товара из корзины. Причина этого в том, что при проектировании макета корзины не было уделено достаточного внимания настройке расстояния между элементами.
Вывод коротких и длинных названий в макете, который настроен неправильно
Решить эту проблему можно, настроив внутренние или внешние отступы элементов. Конкретные действия зависят от ситуации. Здесь я приведу простой пример, предусматривающий использование свойства margin-right при настройке элемента, выводящего название товара.
▍Flexbox-макеты и вывод длинных текстов
При выводе длинных текстов во Flexbox-макетах возможна ситуация, когда такие тексты переполняют родительские элементы. Взгляните на следующий пример.
Элементы выглядят нормально
Вот разметка к этому примеру:
Если имя пользователя не слишком длинно — всё выглядит нормально. Но что случится в том случае, если имя окажется достаточно длинным? В такой ситуации текст переполнит родительский элемент, а это «поломает» макет.
Длинное имя пользователя портит внешний вид страницы
Причина возникновения этой проблемы заключается в том, что размеры Flex-элементов не сокращаются до величин, которые меньше минимального размера их содержимого. Решить эту проблему можно, установив в значение 0 свойство min-width элемента .user__meta :
После этого даже вывод в элементе длинного имени пользователя не испортит макет. Некоторые подробности об использовании свойства min-width при разработке Flexbox-макетов вы можете найти в этом материале.
Итоги
Надеюсь, теперь вы сможете справиться с проектированием элементов, поддерживающих аккуратный вывод длинных и коротких текстов. Я с большим удовольствием писал эту статью. Я, благодаря этому, вспомнил некоторые тонкости работы с разными текстами. А статья будет служить мне хорошим напоминанием о том, как важно обращать внимание на подготовку элементов страниц к выводу текстов разной длины.
Сталкивались ли вы с проблемами, связанными с выводом текстов разной длины на веб-страницах?
Вопрос про CSS — скрыть не влезающий текст в DIV блоке
Нет комментариев в правой стороне, а название рубрики (рубрик) в левой. Дизайн сайта резиновый. Что надо прописать, чтобы при подходе названия рубрики(рубрик) к Нет комментариев не происходило переноса последнего на новую строку, а название самой рубрики сокращалось многоточием.
Если это изобразить на картинке, то вот так:
Первым делом, не забывайте, что любой «резиновый» дизайн все равно должен иметь минимальную ширину, после которой он либо перестает сужаться, либо меняет свой внешний вид под мобильные устройства. По сути вопроса, у вас есть два варианта, как решить задачу с обрезанием текста.
Вариант 1: решение на стороне бекенда
Тут все достаточно просто. В зависимости от того, какой язык вы используете, вы обрезаете название рубрики таким образом, чтобы оно влезало в ваше поле. Например, код на php:
Вариант 2: решение на стороне фронтенда
Тут может быть несколько подвариантов.
- использовать css
- использовать jss
Первый подвариант я бы предложил сразу откинуть, так как он будет в итоге приводить в некоторых случаях к непредсказуемым последствиям. Да и вообще, оставлять текст просто невидимым — не слишком верное решение. Но в общем-то, делается это так:
Как видите, решается достаточно просто, но нет проверки на знаки препинания, не убрать последний пробел, да и вообще разные браузеры по-разному поддерживают css.
Второй подвариант более оптимален. С одной стороны, он похож на первый вариант решения, на стороне бекенда, с другой стороны, он более гибок, так как позволяет обрезать текст динамически, в зависимости от размера экрана пользователя и соответственно в зависимости от ширины блока, где должен оказаться текст.
Самый простой вариант, когда у вас не будет определения необходимой длины, это:
Тут мы обрезаем текст, и если он больше заданной длинны, то добавляем многоточие. Можете дополнить его теми же обработками, что в примере про php, самостоятельно. Ну и самое сложное — это определить размер блока, под который подстраивать ваш текст, после чего вычислить необходимое количество символов. Тут уже все сильно зависит от вашего кода, могу сказать только, что вам точно помогут две функции ванильного js:
Как обрезать текст и добавить в конце многоточие?
Иногда приходится ограничивать длинный текст, к примеру, в блоке с фиксированными размерами, чтобы текст не выходил за пределы этого блока. Часто делается так: текст, который не помещается в заданные размеры, обрезается, а в конце текста добавляется многоточие. Оно подсказывает пользователю, что текст отображается лишь частично.
Способ обрезания текста зависит от длины и числа строк.
Однострочный текст
Для одной строки есть специальное свойство text-overflow со значением ellipsis , которое добавляет многоточие в конце текста. Чтобы это свойство работало, нужно соблюсти ещё два условия.
- Текст должен выводиться в одну строку без переносов. Для запрета переносов мы используем свойство white-space со значением nowrap . Текст за пределами блока скрывается от просмотра с помощью свойства overflow со значением hidden .
Комбинируя три свойства white-space, overflow и text-overflow получим обрезанную строку с многоточием в конце (пример 1).
Пример 1. Использование text-overflow
Результат данного примера показан на рис. 1.
Рис. 1. Вид обрезанного однострочного текста
Многострочный текст
Ограничение нескольких строк представляет собой более сложную задачу, которая потребует применения целого набора нестандартных и устаревших свойств. Нам понадобится следующее.
- Свойство -webkit-line-clamp, которое ограничивает число строк. Значение 3 отобразит три строки, значение 4 — четыре строки.
- Свойство display со значением -webkit-box .
- Свойство -webkit-box-orient со значением vertical .
- Свойство overflow со значением hidden , оно скрывает текст за пределами блока.
Заметьте, что в большинстве случаев мы имеем дело не со стандартными стилевыми свойствами, а добавляем к ним префикс -webkit-. При этом все эти свойства с префиксами работают даже в Firefox.
Свойство display: -webkit-box в настоящий момент устарело, при вёрстке сейчас используется display: flex . Аналогично устарело и -webkit-box-orient: vertical , сейчас вместо него применяется flex-direction: column . При этом нельзя просто заменить устаревшие свойства современными, перестанет работать ограничение строк.
Также есть проблема и с высотой блока — при добавлении padding его значение прибавляется к высоте строк, в итоге отображается часть лишней строки. Чтобы этого избежать можно явно задать высоту блока или вложить один блок внутрь другого. В примере 3 свойство padding применяется к , а набор свойств для ограничения текста к
.
Пример 2. Использование -webkit-line-clamp
Результат данного примера показан на рис. 2.
Рис. 2. Вид обрезанного многострочного текста
Обратите внимание, что здесь нам не нужен text-overflow, многоточие добавляется через свойство -webkit-line-clamp.
Ограничение текста по ширине/высоте
Видео по ширине и высоте экрана
Есть видео, нужно растянуть его по высоте и ширине экрана. Как это сделать? <video autoplay loop.
Градиент не растягивается на 100% по высоте и ширине
Значить, прописываю градиент тегу body а он не растягивается на всю ширину и высоту как если просто.
Как отцентрировать img по высоте и ширине в div?
как отцентрировать img по высоте и ширине в div со статическими размерами, если изображение больше.
Шрифт в CSS определяется по высоте или ширине?
Вот столкнулся с проблемой — есть ведь 1280*1024, а есть 1280*800, а шрифт надо чтоб выглядел.
Похожие публикации:
- Idnet ua corp com что это
- Как выгрузить скетч из ардуино uno на компьютер
- Как написать парсер на java
- Как удалить последний символ в строке php
HTML & CSS: как не надо
Не задавайте контейнерам ширину, равную брикпойнтам
Это решение подходит для мобильных устройств, где прокрутки нет, но не годится для десктопных браузеров, где она есть и занимает место на странице.
Как это увидеть? #
Допустим, есть макет для страницы шириной 600px, контент должен занимать всю ширину. Зададим соответствующий код:
Но если требуется, чтобы размеры картинки не менялись, а всё, что не поместилось по ширине, просто обрезалось, тогда картинке нужна обёртка:
class="panorama"> class="panorama__img" src=". " alt=". "> Теперь центрируется обёртка, и она же отвечает за выравнивание картинки по центру:
.panorama position: relative; /* растягиваем по ширине окна */ width: 100vw; /* скрываем всё, что не поместилось в экран */ overflow: hidden; /* центрируем обёртку */ left: 50%; transform: translate(-50%); /* центрируем картинки */ display: flex; justify-content: center; > .panorama__img /* фиксируем ширину картинки */ width: 982px; /* отключаем max-width, если он было задано выше */ max-width: none; >На мобильных всё будет работать как задумано, но если открыть на десктопе, обнаружится горизонтальная прокрутка:
Потому что 100vw — это не ширина body , а вся ширина окна вместе с прокруткой, то есть элемент такой ширины на странице не поместится, что и вызовет появление горизонтальной прокрутки.
Чтобы решить эту проблему, ближайшему родителю широкой картинки, растянутому на всю ширину страницы, задайте overflow: hidden .
Горизонтальная прокрутка пропала, всё работает как надо.
Итого
Не задавайте контейнерам ширину, равную брикпойнтам, это может вызвать появление горизонтальной прокрутки в десктопных браузерах. Задавайте меньшую ширину или используйте паддинги/марджины для контейнеров с нефиксированной шириной.
Ограничение текста по ширине/высоте
Интересует, как ограничить текст по ширине, в плане того, что достигает скажем 250px и появляется многоточие, а весь оставшийся текст открывается по исполняющему скрипту, также интересно как данный момент реализоваться по высоте, к примеру на пятой строке такое ограничение возникает.
Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Видео по ширине и высоте экрана
Есть видео, нужно растянуть его по высоте и ширине экрана. Как это сделать? <video autoplay loop.
Градиент не растягивается на 100% по высоте и ширине
Значить, прописываю градиент тегу body а он не растягивается на всю ширину и высоту как если просто.
Как отцентрировать img по высоте и ширине в div?
как отцентрировать img по высоте и ширине в div со статическими размерами, если изображение больше.
Шрифт в CSS определяется по высоте или ширине?
Вот столкнулся с проблемой — есть ведь 1280*1024, а есть 1280*800, а шрифт надо чтоб выглядел.
632 / 474 / 170
Регистрация: 26.05.2016
Сообщений: 2,624
1 2 3
overflow: hidden; max-width: значение; max-height: значение;
228 / 208 / 27
Регистрация: 18.02.2010
Сообщений: 1,985
overflow: hidden; это сдорово это мы всё знаем, но задача как вы бы могли заметить немного другая.
2240 / 1628 / 641
Регистрация: 07.08.2016
Сообщений: 3,928
Сообщение было отмечено Mailo как решение
Решение
p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates libero, architecto rerum a velit dolor delectus ex beatae minima asperiores temporibus neque ad corrupti sint laboriosam vero facere. Natus, id./p>
1 2 3 4 5 6
p{ width: 250px; overflow: hidden; white-space: nowrap; text-overflow:ellipsis; }