Как ограничить текст по ширине html
Перейти к содержимому

Как ограничить текст по ширине html

  • автор:

Выравнивание текста

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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

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

Для установки выравнивания текста обычно используется тег абзаца

с атрибутом align , который определяет способ выравнивания. Также блок текста допустимо выравнивать с помощью тега с аналогичным атрибутом align , как показано в табл. 2.

Табл. 2. Выравнивание текста с помощью параметра align

Код HTML Описание

Текст

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

Текст

Выравнивание по центру.

Текст

Выравнивание по левому краю.

Текст

Выравнивание по правому краю.

Текст

Выравнивание по ширине.
Текст Отключает автоматический перенос строк, даже если текст шире окна браузера.
Текст

Разрешает браузеру делать перенос строки в указанном месте, даже если используется тег .
Текст
Выравнивание по центру.
Текст
Выравнивание по левому краю.
Текст
Выравнивание по правому краю.
Текст
Выравнивание по ширине.

Выравнивание элементов по левому краю задано по умолчанию, поэтому указывать его лишний раз необходимости нет. Так что align=»left» можно опустить.

Отличие между абзацем (тег

) и тегом в том, что в начале и конце параграфа появляется вертикальный отступ, чего нет в случае использования тега .

Атрибут align достаточно универсален и может применяться не только к основному тексту, но и к заголовкам вроде . В примере 1 показано, как в подобном случае устанавливать выравнивание.

Пример 1. Выравнивание текста

    Выравнивание текста  

Как поймать льва?

Метод перебора

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

Метод дихотомии

Делим пустыню на две половины. В одной части - лев, в другой его нет. Берем ту половину, в которой находится лев, и снова делим ее пополам. Так повторяем до тех пор, пока лев не окажется пойман.

Результат примера показан на рис. 1.

Выравнивание текста по правому и левому краю

Рис. 1. Выравнивание текста по правому и левому краю

В данном примере выравнивание заголовка происходит по центру окна браузера, выделенного абзаца по правому краю, а основного текста — по левому краю.

Как выровнять текст по ширине?

Выравниванием по ширине называется такой способ форматирования текста, когда левый и правый края текста выравниваются по вертикальным линиям (рис. 1).

Рис. 1. Выравнивание текста по ширине

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

Чтобы выровнять текст по ширине ему достаточно добавить свойство text-align со значением justify , как показано в примере 1.

Пример 1. Использование text-align

В данном примере мы используем класс text-justify , который при добавлении его к любому элементу выравнивает текст по ширине.

Последняя строка нашего текста по умолчанию остаётся выровненной по левому краю. Для управления поведением последней строки есть отдельное свойство text-align-last. К примеру, значение right выравнивает по правому краю, а center — по центру (пример 2).

Пример 2. Использование text-align-last

См. также

  • text-align
  • text-align-last
  • Свойства текста в CSS

Как сделать ограничение переноса текста с нижнего блока, относительно ширины верхнего?

Как сделать ограничение переноса текста с нижнего блока, относительно ширины верхнего?

body < margin: 0; font-family: Abel, sans-serif; font-size: 20px; color: 181a1f; background-color: #17191e >*, *:before, *:after < box-sizing: border-box; >h1,h2,h3,h4,h5,h6 < margin: 0; >/* Container */ .container < width: 100%; max-width: 1170px; margin: 0 auto; >/* Header */ .header_logo < margin-top: 43px; >/* Intro */ .intro < width: 100%; height: 100vh; >.intro_inner < >.intro_title < line-height: 1 ; margin-top: 200px; font-size: 176px; color: #ffdb00; text-transform: uppercase; font-weight: normal; >.intro_text
      Montreal   

wake the design

Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt.

Отслеживать
задан 10 сен 2020 в 17:35
1 1 1 бронзовый знак

Уменьшить ширину контейнера, используя max-width , также нужно несколько @media (max-width: ?) сделать, чтобы на разной ширине экрана тоже всё подкрутить

10 сен 2020 в 17:53

@МихаилКамахин неправильно нарисовал, все элементы и так находятся в фиксированном контейнере и не выходят за него, я хочу чтобы блок с текстом и текст внутри него был по ширине верхнего блока с заголовком, а блок заголовка ограничивался текстом внутри него. То есть вот так: imgur.com/a/w9Xs4I2

10 сен 2020 в 18:06

Да, я и говорю, уменьшите ширину контейнера, в котором находятся эти два элемента: большой текст и маленький текст

10 сен 2020 в 19:47
@Kurokkasu оберните header и intro в один блок
10 сен 2020 в 19:56

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Можно ограничить ширину блока, ширину текста в h1 и настроить несколько медиа-запросов

body < margin: 0; font-family: Abel, sans-serif; font-size: 20px; color: 181a1f; background-color: #17191e >*, *:before, *:after < box-sizing: border-box; >h1,h2,h3,h4,h5,h6 < margin: 0; >/* Container */ .container < width: 100%; max-width: 1170px; margin: 0 auto; >/* Header */ .header_logo < margin-top: 43px; >/* Intro */ .intro < width: 100%; height: 100vh; >.intro_inner < width: 100%; >.intro_title < line-height: 1 ; margin-top: 200px; font-size: 176px; color: #ffdb00; text-transform: uppercase; font-weight: normal; >.intro_text < width: 100%; max-width: 700px; text-align: left; margin-top: 50px; color: #fff; >@media only screen and (max-width:1200px) < .intro_inner < padding: 0 10px; >> @media only screen and (max-width: 718px) < .intro_inner < display: flex; flex-direction: column; align-items: center; >.intro_title < max-width: 500px; >> @media only screen and (max-width: 520px) < .intro_title < font-size: 32.7vw; >>
      Montreal   

wake the design

Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt.

Как обрезать текст и добавить в конце многоточие?

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

Способ обрезания текста зависит от длины и числа строк.

Однострочный текст

Для одной строки есть специальное свойство text-overflow со значением ellipsis , которое добавляет многоточие в конце текста. Чтобы это свойство работало, нужно соблюсти ещё два условия.

  1. Текст должен выводиться в одну строку без переносов. Для запрета переносов мы используем свойство white-space со значением nowrap .
  2. Текст за пределами блока скрывается от просмотра с помощью свойства overflow со значением hidden .

Комбинируя три свойства white-space, overflow и text-overflow получим обрезанную строку с многоточием в конце (пример 1).

Пример 1. Использование text-overflow

Результат данного примера показан на рис. 1.

Вид обрезанного однострочного текста

Рис. 1. Вид обрезанного однострочного текста

Многострочный текст

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

  1. Свойство -webkit-line-clamp, которое ограничивает число строк. Значение 3 отобразит три строки, значение 4 — четыре строки.
  2. Свойство display со значением -webkit-box .
  3. Свойство -webkit-box-orient со значением vertical .
  4. Свойство 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.

Использование JavaScript

Если не хочется связываться с устаревшими свойствами, всегда можно воспользоваться JavaScript для решения нашей задачи. Библиотека Clamp.js позволяет выбрать алгоритм работы — с помощью -webkit-line-clamp , в этом случае применяется набор свойств из примера 2 или путём явного обрезания строки (пример 3).

Пример 3. Использование Clamp.js

Обратите внимание на параметр useNativeClamp . По умолчанию его значение равно true , в этом случае к элементу добавляется свойство -webkit-line-clamp . Если же указать значение false , тогда строка обрезается явно. Между этими алгоритмами Clamp.js есть небольшая разница, заметная при изменении размера окна браузера. Использование useNativeClamp:true обрезает строку лишь при необходимости, когда она превышает три строки. useNativeClamp:false обрезает всегда и при изменении размеров блока строка так и остаётся обрезанной.

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

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