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

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

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.

Как ограничить длину текста css

Иногда бывает ситуация, когда слишком длинный текст неудобно отображать в блоке на странице, но необходимо дать пользователю информацию о том, текст большой. В данной ситуации используется CSS свойство text-overflow . text-overflow работает в том случае, если для блока c данными, задано значение свойства overflow такое как auto, scroll или hidden и white-space: nowrap. Рассмотрим пример.

Исходный HTML документ:

 class="long-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit.

.long-text  /* Делаем видиму границу блока и добавляем внутренний отступ */ border: 1px solid #245488; padding: 10px; width: 150px; /* Эти опции - необходимые условия */ overflow: hidden; white-space: nowrap; /* Добавляем троеточия в конце предложения, если текст не помещается в блок */ text-overflow: ellipsis; >

text-overflow

Результат:

Как выровнять текст одновременно по правому и левому краю?

Для выравнивания текста в блоке, например абзаце, применяется стилевое свойство text-align . Его значение justify и устанавливает выравнивание текста по ширине, т.е. сразу по левому и правому краю текстового блока (пример 1).

Пример 1. Выравнивание по ширине

Выравнивание по ширине

JPEG (Joint Photographic Experts Group) - популярный формат графических файлов, широко применямый при создании сайтов и хранения изображений. JPEG поддерживает 24-битовый цвет и сохраняет яркость и оттенки цветов в фотографиях. Данный формат называют сжатием с потерями, поскольку алгоритм JPEG выборочно отвергает данные.

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

Рис. 1. Текст, выровненный одновременно по правому и левому краю

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

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

По умолчанию текст на веб-страницах выровнен по левому краю элемента, в котором он располагается, однако используя свойство text-align, можно переопределить, как будут выравниваться строки текста относительно границ элемента. Рассмотрим каждое из возможных значений:

left - выравнивает текст по левому краю.
right - выравнивает текст по правому краю.
center - выравнивает текст по центру.
justify - выравнивает текст по ширине, в таком тексте оба конца строки размещаются вплотную к внутренним краям элемента. Пробелы между словами в этом случае корректируются браузером так, что бы длина всех строк была строго одинаковая.

Название документа

Пример выравнивания текста

февраль, 2012

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

Примечание: свойство text-align работает только с блочными элементами, такими как абзац или div, выравнивая внутри них все строчное содержимое, включая изображения. Применение свойства к строчным элементам, таким как ссылка или span, не даст никакого эффекта.

С этой темой смотрят:

Отступ текста в CSS
Цвет и тень текста в CSS
Как изменить шрифт в CSS
CSS стиль и размер шрифта
Стандартные (безопасные) шрифты

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru