Свойства Min и Max width/height в CSS
Порой у разработчиков возникает необходимость ограничить ширину элемента относительно родителя, и в то же время, оставить её динамичной. Задав таким образом начальный размер с возможностью расширения при наличии доступного пространства. Например, нам нужна кнопка, которая должна иметь минимальную ширину. Именно в таких ситуациях удобно использовать свойства максимума и минимума.
В этой статье мы познакомимся с CSS-свойствами максимума и минимума для ширины и высоты, а также детально рассмотрим каждое из них и сценарии их использования.
Свойства ширины
Начать обсуждение хотелось бы со свойств, связанных с шириной. У нас есть min-width и max-width, и каждое из них крайне важно и полезно в определённых ситуациях.
Минимальная ширина (min-width)
Своство min-width предназначено для предотвращения уменьшения ширины элемента ниже заданного значения. Значением по умолчанию является auto , которое может доходить до 0 .
Чтобы продемонстрировать его, давайте рассмотрим базовый пример:
Есть кнопка с текстом, размер которого может меняться от одного до нескольких слов. Чтобы быть уверенным, что эта кнопка будет иметь минимально допустимую ширину, даже если внутри будет только одно слово, нужно использовать min-width . Минимальную ширину задали равной 100px, поэтому даже если у кнопки будет очень короткое содержимое, как, например, только слово «Done» или только иконка, она всё равно будет достаточно большой, чтобы оставаться заметной. Это особенно важно, когда вы работаете с сайтами, переведёнными на разные языки
Рассмотрим пример с арабским языком в Twitter:
В примере выше кнопка содержит слово “تم”, что на арабском значит «Готово». Из-за короткого содержимого ширина и самой кнопки стала слишком мала, поэтому я обозначил минимум, задав ей свойство min-width , что можно увидеть на изображении справа (в секции «After»).
Минимальная ширина и Padding
Хотя свойство min-width и допускает увеличение ширины кнопки при увеличении размера её содержимого, по бокам всё же следует задавать padding , чтобы гарантировать внутренний отступ от её границ. Разница приведена на рисунке ниже
Максимальная ширина (max-width)
Свойство max-width предназначено для предотвращения увеличения ширины элемента выше заданного значения. Значение по умолчанию – none .
Распространённый и простой пример использования max-width заключается в его применении к изображениям. Рассмотрим пример ниже:
Если к изображению применить свойство max-width: 100% оно останется в границах родительского элемента, даже при том, что его изначальный размер больше. Если же изображение изначально меньше родителя, данное свойство никак на него не повлияет.
Использование min-width и max-width
Если к элементу применяются оба свойства, какое из них переопределит значение другого? Другими словами, у какого свойства приоритет выше?
Если значение min-width больше, чем max-width , оно будет принято за ширину элемента. Рассмотрим следующий пример:
Исходное значение width равно 100px и в дополнение к этому заданы значения свойств min-width и max-width . В результате ширина данного элемента не будет превышать 50% ширины родительского блока
Свойства высоты
В дополнение к свойствам минимальной и максимальной ширины, есть такие же свойства для высоты
Минимальная высота (min-height)
Свойство min-height предназначено для предотвращения уменьшения высоты элемента ниже заданного значения. Значением по умолчанию является auto , которое может доходить до 0 .
Чтобы продемонстрировать его, давайте рассмотрим простой пример.
У нас есть секция с текстовым содержимым. Необходимо, чтобы она смотрелась красиво как с большим, так и с малым количеством текста
Минимальная высота задана 100px, а содержимое центрировано с помощью flexbox по горизонтали и вертикали. Что произойдёт, если содержимого станет больше? Например, будет целый абзац
Да, вы уже догадались. Высота секции увеличится, чтобы вместить больше содержимого. С помощью этого мы можем создавать гибкие компоненты, реагирующие на количество содержимого
Максимальная высота (max-height)
Свойство max-height предназначено для предотвращения увеличения высоты элемента больше заданного значения. Значением по умолчанию является none .
На следующем примере я задал max-height для содержимого. Но так как оно больше указанной области, происходит переполнение и текст выходит за границы родительского элемента
Примеры использования свойств
Рассмотрим некоторые распространённые и редкие сценарии использования свойств min-width , min-height , max-width , и max-height
Список тегов
В списке тегов рекомендуется указывать минимальную ширину каждого тега, чтобы не страдал их внешний вид в случае короткого содержимого.
Обладая такой гибкостью, тег будет хорошо выглядеть независимо от того, насколько коротким является его содержимое. Но что случится, если автор задал очень большое имя тега, а используемая им CMS (content management system) не имеет ограничений по количеству символов в теге? В этой ситуации также можно использовать max-width
.c-tag < display: inline-block; min-width: 100px; max-width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; /*Other styles*/ >С помощью max-width можно ограничить максимальную ширину определённым значением. Однако, недостаточно применения только этого свойства. Содержимое, превышающее максимальную ширину, должно быть усечено.
Кнопки
Существуют разные сценарии использования свойств минимума и максимума для кнопок, поскольку и самих вариантов компонентов кнопок также немало. Рассмотрим следующий макет:
Обратите внимание, что ширина кнопки «Get» слишком мала. Если по какой-то причине у кнопки еще и не будет текста (а только иконка), всё может стать еще хуже. В этом случае установка минимальной ширины очень важна
Обнуление минимальной ширины для Flexbox
Значение по умолчанию у свойства min-width равняется auto, что вычисляется как ноль. Когда элемент является flex-элементом, значение min-width не становится нулём. Минимальный размер flex-элемента равняется размеру его содержимого.
Согласно CSSWG:
По умолчанию, flex-элементы не становятся меньше минимального размера, необходимого их содержимому (длина самого длинного слова или элемента с фиксированным размером). Чтобы изменить это, задайте свойство min-width или min-height .
Рассмотрим следующий пример:
Имя пользователя содержит очень длинное слово, которое вызывает переполнение и горизонтальную прокрутку. Хотя я и добавил представленный ниже CSS для усечения содержимого:
.c-person__name
Поскольку заголовок является флекс-элементом, решение состоит в том, чтобы сбросить значение min-width и заставить его стать нулём
.c-person__name < /*Other styles*/ min-width: 0; >Вот как это должно выглядеть после исправления:
Из описания в CSSWG следует, что установка свойства overflow в значение, отличное от visible , может привести к тому, что значение min-width будет вычислено как ноль, что также решает нашу проблему без необходимости явно задавать min-width: 0 .
Обнуление минимальной высоты для Flexbox
Хотя это менее распространённая проблема по сравнению с min-width, она всё же может встретиться. Проблема связана с flex-элементами, которые не могут быть короче своего содержимого. В результате значение min-height устанавливается равным размеру контента.
Рассмотрим следующий пример:
Текст, окрашенный в красный цвет, должен быть обрезан границами контейнера. Но поскольку данный элемент является flex-элементом, его min-height равняется высоте содержимого. Чтобы предотвратить это, мы должны сбросить значение минимальной высоты. Давайте посмотрим на HTML и CSS код:
.c-panel < display: flex; flex-direction: column; height: 180px; >.c-panel__body < min-height: 0; >.c-panel__content
Добавление элементу min-height: 0 сбросит значение свойства и оно начнёт работать так, как ожидается
Демо
Одновременное использование min-width и max-width
Порой бывают ситуации, когда у нас есть элемент с минимальной шириной, но в то же время, максимальная ширина не задана. Это может привести к тому, что элемент станет слишком широким, хотя такое поведение не задумывалось. Рассмотрим следующий пример:
Поскольку ширина определена в пикселях, нет уверенности, что описанное выше будет работать для мобильных. Чтобы решить эту проблему, мы можем использовать проценты вместо пикселей для свойств минимума и максимума. Рассмотрим пример ниже:
Я добавил следующий CSS-код для изображений:
Контейнер для страницы
Один из наиболее полезных сценариев применения свойства max-width – для обёртки (или контейнера) страницы. Задав странице максимальную ширину, мы можем быть уверены, что пользователям будет удобно просматривать и читать содержимое
Ниже приведён пример центрированной обёртки, имеющей padding слева и справа
.wrapper
Максимальная ширина и единица измерения «ch»
Единица измерения ch равняется ширине символа 0 (ноль), используемого в шрифте текущего элемента. Используя её в свойстве max-width, мы можем регулировать количество символов в строке. Согласно этой статье с сайта Smashing Magazine, рекомендованная длина строки от 45 до 75 символов.
В предыдущем примере с элементом-обёрткой, мы могли извлечь пользу от использования этого символа, поскольку это элемент статьи
.wrapper < max-width: 70ch; /* Other styles */ >Анимирование элемента с неизвестной высотой
Порой мы сталкиваемся с проблемой анимирования аккордеона или мобильного меню с неизвестной высотой содержимого. В этом случае применение max-height может быть хорошим решением.
Рассмотрим следующий пример:
Когда нажимается кнопка меню, само меню должно плавно появляться сверху вниз. Сделать это без JavaScript невозможно, если только у элемента не задана фиксированная высота (а это делать не рекомендуется). Тем не менее, это возможно с помощью max-height. Идея заключается в добавлении элементу очень большой высоты, например, max-height: 20rem , которая, не будет достигнута, после чего мы можем задать шаги анимации от max-height: 0 , до max-height: 20rem
.c-nav < max-height: 0; overflow: hidden; transition: 0.3s linear; >.c-nav.is-active
Нажмите на гамбургера, чтобы увидеть анимацию в действии
Минимальная высота для верхней секции (hero)
Как видите, я не люблю задавать элементам фиксированную высоту. Я чувствую, что поступая так, иду против концепции, согласно которой компоненты в вебе должны быть гибкими. Добавление минимальной высоты для первой секции сайта (секция «hero») полезно в ситуациях, когда добавляется очень большое содержимое (такое бывает).
Рассмотрим следующий пример, где у нас есть секция «hero» с фиксировано заданной высотой. Вроде смотрится хорошо.
Однако, когда содержимое увеличивается, оно переполняет контейнер и выходит за рамки обёртки секции. Это плохо.
Чтобы заранее избежать этой проблемы, мы можем вместо height добавить min-height . Мы поступаем именно так, по крайней мере, для того, чтобы очистить нашу совесть. Даже при том, что это может быть причиной весьма странного отображения страницы, я считаю, что подобные ситуации должны быть предотвращены в первую очередь, в системе управления контентом (CMS). После этого проблема исправлена и страница выглядит хорошо:
Проблема переполнения содержимым заключается не только в том, что оно может быть больше фиксированной высоты родителя. Это может произойти в результате уменьшения размера экрана и, как следствие, увеличения высоты текстового содержимого из-за переносов:
Если задавать не фиксированную высоту, а лишь ограничивать минимальную с помощью min-height , описанная выше проблема не произойдёт вовсе.
Модальное окно
Для компонента модального окна необходимо задавать и минимальную и максимальную ширину, следовательно, это будет работать на экранах любых размеров (от мобильных до десктопных). Это напоминает об интересной статье на CSS-Tricks, в которой рассказывается, что делать в этом случае.
.c-modal__body
.c-modal__body
Что касается меня, я предпочитаю второй способ, так как мне нужно только определить max-width: 600px . Модальное окно – это элемент div , поэтому у него уже ширина задана = 100% от родителя, правильно?
Рассмотрим приведённый ниже пример с модальным окном. Обратите внимание, как ширина становится равной 100% от ширины родителя, если в области просмотра недостаточно свободного места
Минимальная высота и липкий footer
Когда содержимое страницы недостаточно большое, футер ожидаемо не прилипнет к нижней части. Давайте рассмотрим пример, который лучше продемонстрирует это:
Обратите внимание, что футер не прилип к нижнему краю окна браузера. Это происходит из-за того, что высота содержимого меньше высоты окна браузера. После решения этой проблемы, страница должен выглядеть следующим образом:
Сначала я сделал элемент body flex-контейнером, после чего установил ему минимальную высоту 100% от области просмотра.
body < display: flex; flex-direction: column; min-height: 100vh; >footer
Рекомендую ознакомиться с этой статьёй о липких футерах.
Демо
Пропорциональные размеры элемента и max-width/height
Чтобы сделать пропорциональный контейнер, который масштабируется в зависимости от размера области просмотра, однажды был представлен хак с использованием padding. Сейчас мы можем имитировать похожее поведение, комбинируя единицы измерения области просмотра и максимальную ширину/высоту.
На основе материалов статьи Miriam Suzanne, я хочу объяснить, как это работает.
У нас есть изображение с размерами 644 x 1000 пикселей. Нам нужно сделать следующее:
- Соотношение сторон: height / width (высоту поделить на ширину)
- Ширина контейнера: может быть фиксированной или динамической (100%)
- Задайте height , равный 100% ширины области просмотра, умноженной на соотношение сторон
- Задайте max-height , равный ширине контейнера, умноженной на соотношение сторон
- Задайте max-width , равное ширине контейнера
HTML/Body с высотой 100%
Что делать, если нам нужно, чтобы элемент body занимал 100% высоты области просмотра? Это распространённый вопрос как в веб-сообществе в целом, так и на сайте StackOverflow в частности.
Сначала нужно задать height: 100% элементу html . Это будет гарантировать, что корневой элемент имеет высоту 100%. Затем добавляем min-height для элемента body . Причина, по которой используется именно min-height в том, что это свойство позволяет высоте элемента body быть динамичной, и подстраиваться, каким бы большим не было содержимое
html < height: 100%; >body
Примечания
Минимальная ширина и блочные элементы
Порой мы забываем, что элемент, к которому пытаемся применить min-width , является блочным. В итоге это может сбить с толку и никак не влиять на элемент. Убедитесь, что элемент не является блочным
CSS функции сравнения
При исследовании на StackOverflow основных проблем, с которыми сталкиваются разработчики, я наткнулся на этот вопрос, в котором автор спрашивает следующее:
Реально ли сделать что-то подобное? max-width: calc(max(500px, 100% — 80px)) или может вот такое max-width: max(500px, calc(100% — 80px)))
Желаемое поведение заключается в том, чтобы удерживать ширину элемента не более 500px. Если ширина области видимости недостаточна, чтобы вместить элемент, то ширина должна быть 100% – 80px .
Что касается решения, опубликованного в ответ на вопрос, я попробовал применить его и он работает в Chrome 79 и Safari 13.0.3. Хоть это и выходит за рамки статьи, я всё же приведу здесь решение:
.yourselector < max-width: calc(100% - 80px); >/* Update: I changed the max-width from 500px to 580px. Thanks @fvsch */ @media screen and (max-width: 580px) < .yourselector < max-width: 500px; >> Источники и материалы для дальнейшего изучения
- Flex items and min-width:0 от Dominic McPhee
- CSS: Flex and “min-width” от Dominik Schöler
- Flexbugs от Philip Walton
CSS. Как полностью ограничить объект в ширине
Внутри блока 2 блока, первый слева, второй справа, несмотря на то что первый ограничен в ширине а правый прикреплён к правой части блока, первый смещает второй вниз, так что тот выходит за родительский блок. Как грамотно расположить их? Код прилагается:
Отслеживать
задан 8 ноя 2022 в 1:18
Cadreigich Cadreigich
5 3 3 бронзовых знака
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Способов полно. Как минимум min-width:=* , width: 100% , max-width:=* или:
.main < width: 326px; height: 300px; background: black; >.main > div < width: 49.95%; height: 50px; background: white; display: inline-block; >.main > div + div
Отслеживать
1,767 2 2 золотых знака 5 5 серебряных знаков 17 17 бронзовых знаков
ответ дан 8 ноя 2022 в 1:35
Tryd0g0lik Tryd0g0lik
96 1 1 серебряный знак 10 10 бронзовых знаков
Дело в способе отображения элементов. По умолчанию любой div отображается как блочный, т.е. он располагается относительно предыдущего ниже. А значит, что независимо от того, какую ширину и высоту вы укажете первому блоку, второй будет ниже. Значит его нужно сделать обтекаемым, добавив display: inline-block , например:
.wrapper < width: 200px; height: 300px; background: black; >.first < width: 50px; height: 50px; background: white; display:inline-block; >.second
Того же эффекта вы можете добиться, если добавить float: left первому элементу, что также сделает его обтекаемым:
.wrapper < width: 200px; height: 300px; background: black; >.first < width: 50px; height: 50px; background: white; float: left; >.second
Можно воспользоваться свойством position: absolute , благодаря которому можно расположить элемент в любой точке:
.wrapper < width: 200px; height: 300px; background: black; position: relative; >.first < width: 50px; height: 50px; background: white; position: absolute; top: 0; left: 0; >.second
Еще вы можете воспользоваться свойством display:grid . Благодаря ему можно разбить элемент на ячейки, в которых можно размещать дочерние элементы. Причем элемент может не ограничиваться только одной ячейкой, но и занимать несколько. В примере ниже я разбил родительский элемент на ячейки 50х50 px и расположил в них дочерние элементы согласно вашему описанию.
.wrapper < width: 200px; height: 300px; background: black; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(6, 1fr); >.first < background: white; grid-column: 1; grid-row: 1; >.second < background: blue; grid-column: 4; grid-row: 1 / 7 >Свойства CSS для изменения текста
Основные данные по стилям CSS были рассмотрены в предыдущих статьях. Теперь можно перейти к свойствам стилей, которые вы будете применять для достижения своих целей в сайтостроении. Начнем с изучения свойств CSS, которые применяются к тексту для изменения его вида, размеров, цвета, отступов и т.п.
Свойство Font
font — универсальное свойство, в которое можно включать несколько характеристик, указывая их через пробел — такие как стиль, жирность, размер, размер шрифта.
font: italic 12px arial;
Но обычно свойства font расписывают отдельно:
font-family — указывается имя (тип) шрифта. Можно указать через запятую, тогда — если у пользователя нет 1-го шрифта, то применится следующий.
font-family: verdana, times new roman;
font-size — размер шрифта, можно указывать в px, em, процентах или через постоянные значения — xx-small, x-small, small, medium, large, x-large-xx-large.
font-style — выбор способа вида шрифта — курсив (italic), наклонный (oblique) и обычный (normal)
font-variant — определение строчных букв — нормальное (normal) и small-caps (строчные буквы, как уменьшенные заглавные)
font-weight — определние жирности шрифта. Можно указывать от 100 до 900 или с помощью слов: bold, bolder, lighter и normal.
Изменения между символами
letter-spacing — отступ между символами. Можно указывать в отрицательном значении в px, in, pt и т.п. Для обычного интервала — normal.
line-height — отступ между строками. Можно указывать в px, % или normal. Нельзя указать отрицательное значение.
word-spacing — отступ между словами. Указывается в px, in, pt и т.п. или normal.
Положение и декор текста
text-align — положение теста по центру (center), по левому (left) или по правому (right) краям:
vertical-align — положение текста по вертикали, относительно родителя. Устанавливается с помощью слов:
- bottom — по нижнему краю родителя
- middle — по середине
- top — по верхнему краю родителя
- sub — текст показывается по нижнему индексу
- super — текст располагается по верхнему индексу
Также можно указывать в мерах длины и процентах с учетом того, что при положительном значении — смещение вверх, а при отрицательном — вниз.
text-decoration — добавление декора к тексту с помощью подчеркивания снизу (underline), сверху (overline), перечеркивания (line-through) и мигание (blink). Значение none — отменяет декорирование, даже подчеркивание ссылок.
text-indent — определение отступа первой строки абзаца. Указывается в любой мере длины.
text-shadow — тень к тексту. Сначала указывается смещение по x, затем по у и радиус размытия тени. В конце можно указать цвет тени.
text-shadow:2px 2px 5px red;
text-transform — управление заглавными и строчными буквами с помощью слов:
- capitalize — у каждого слова 1-й символ заглавный
- lowercase — все символы будут строчными
- uppercase — все символы станут заглавными
- none — по-умолчанию
white-space — выбор отображения пробелов с помощью слов:
- normal — значение по-умолчанию
- nowrap — текст располагается в одну строку, перенос только с
- pre — учитываются все пробелы и переносы
- pre-line — разрешаются переносы строк
- pre-wrap — перенос строки, если не вмещается по ширине
Для знакомства с основными тегами для текста читайте статью из раздела верстки HTML.
Расположение текста вертикально (CSS, HTML)
Выводить на сайте текст вертикально можно в различных целях. Это может быть чисто дизайнерский ход и в таких случаях этот изыск реализуется простой картинкой. Думаю здесь все понятно, и рассматривать эту «технологию» не нужно.
Но вот что делать, если оформление вертикального текста не изыск, а реальная необходимость? Чаще всего такая проблема возникает при необходимости разместить на сайте большую таблицу с кучей полей, содержащих несколько символов, но заголовками из нескольких слов.
В CSS есть свойства transform и transform-origin, которые выполняют такую функцию. В реале же для разных браузеров были добавлены соответствующие стили (-ms-transform, -moz-transform, -ms-transform-origin, -moz-transform-origin).
Применяя эти свойства, мы получим развернутый текст, но его расположение будет смещенным относительно исходного положения контейнера. Располагая одну строку вертикально не сложно настроить ее положение, дорабатывая смещением margin.
Чуть сложнее задача становится, если нужно расположить близко стоящие колонки в таблице. Например, таблица:
| Заголовок 1 | Заголовок 2 | Заголовок 3 | Заголовок 4 | Заголовок 5 |
| 1 | 2 | 3 | 4 | 5 |
| 6 | 7 | 8 | 9 | 10 |
При развороте текста, размеры содержащего контейнера по ширине и высоте становятся равными, а из-за ячейки с развернутым текстом не становятся меньше. Чтобы было проще управлять шириной ячеек и в итоге получить таблицу с узкими ячейками, стоит текст заключить во вложенные теги div, к которым и будет применяться стили вертикального текста. Здесь же задаем высоту ячейки с заголовками таблицы и ширину блока. Чтобы текст выводился в одну строку, добавляем запрет на перенос строки (white-space: nowrap).
В зависимости от необходимого положения, смещение тоже придется подгонять вручную свойством margin.
В итоге, получаем следующий код и результат:
Стоит еще отметить, что свойству transform можно задавать произвольный угол наклона текста, а не только 90 градусов, как показано в примере выше.
Данное решение не идеальное, но для конкретной задачи можно использовать. Если у кого-то есть иное решение, более очевидное и простое, делитесь в комментариях.
HTML выравнивание текста по центру, ширине и отступ. Свойства CSS для оформления текста HTML (vertical-align, text-align, text-indent и другие) Как сделать выравнивание текста в html
В примере ниже показано, как выровнить текст по ширине страницы:
С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку.
С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку.
С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку.
Значение justify обеспечивает равномерное выравнивание текста справа и слева , то есть по ширине . Такой метод широко используется в печати.
Выравнивание текста в HTML по центру и по ширине
Выравнивание текста в HTML по центру, текст справа :
Атрибуты и значения
- align=»left» — определяет выравнивание текста слева (по умолчанию).
- align=»center» — выравнивает текст по центру .
- align=»right» — выравнивает текст справа .
Выравнивание | HTML отступ текста
HTML текст и его отступ слева страницы
Произведем отступ текста слева двумя способами:
Посмотреть в новом окне.
Здравствуйте, уважаемые читатели блога сайт. Сегодня мы продолжаем изучать и у нас на очереди свойства text-decoration, vertical-align, text-align, text-indent и ряд других, которые помогают оформлять внешний вид текстов в Html коде.
В прошлой статье мы рассмотрели свойства , которые предназначаются для настройки внешнего вида шрифтов при .
Ну, а еще раньше мы во всех подробностях рассмотрели все типы , узнали как их можно группировать и какие приоритеты расставляет браузер при их интерпретации. Правда, все это было разбито на несколько статей, поэтому чтобы не запутаться я советую изучать материалы в том порядке, как это приведено в .
Text-decoration, text-align, text-indent в CSS
Как же в Css работать с текстом? Вполне логично будет предположить, что для этой цели существуют специально предназначенные правила. Давайте начнем с text-align, которое является фактически заменой атрибута align (он использовался для выравнивания содержимого, например, абзацев P или заголовков).
Он имеет всего четыре возможных значения:
Смысл остается таким же, как и был раньше. Text align — это горизонтальное выравнивание строк. Применяется это правило исключительно только для блочных элементов (параграфы, заголовки и т.п.), т.е. тех тегах, в которых может появиться несколько строк. Т.к. в строчных элементах строк может быть только одна, то и смысла использования в них text-align особого нет.
Понятно, что значения этого правила означают выравнивание, соответственно: по левому краю (left), по правому краю (right), по центру (center) и по ширине страницы (Justify — одновременно по левому и правому краю за счет увеличения расстояния между словами). Само собой, что значение Justify стоит использовать для элементов хотя бы с несколькими строками текста, иначе видимого эффекта от этого не будет.
Для примера, я выровнял предыдущий абзац по ширине (видите у него ровные границы и слева, и справа), используя:
По умолчанию горизонтальное выравнивание текста осуществляется по левому краю, т.е. специально писать text-align:left не нужно, если, конечно же, раньше вы не задавали другое выравнивание. Этот абзац я, кстати, выровнял по центру (center) опять же для наглядного примера, но тут, я думаю, все и так понятно.
Следующее Css правило text-indent позволяет задать красную строку, например, для текста в теге абзаца P. Отступ красной строки можно задать с помощью указания величины (как со знаком плюс, так и со знаком минус, используя ) или с помощью процентов:
От чего считаются проценты в text-indent? От ширины области, которая отведена под текст. Т.е. Css правило text-indent:50% задаст красную строку равную половине длины этой самой строки. Ну, а этот абзац как раз и служит примером такого правила.
А можно, например, задать отрицательное значение красной строки в text-indent и тогда мы получим примерно то, что вы видите в этом абзаце. Для достижения данного результата я написал для тега абзаца P вот такое вот CSS правило:
Ну, а обычное использование text-indent (для задания стандартной красной строки) может выглядеть так: text-indent:40px; (кстати, применено к этому параграфу). Это правило, так же как и рассмотренное раньше text-align, применяется только для блочных элементов , т.е. там, где может появиться несколько строк (абзацы, заголовки и т.п.).
Так, теперь давайте перейдем к text-decoration (оформление с помощью горизонтальной линии), которое применяется уже ко всем Html элементам (и строчным, и блочным).
Оно может иметь всего четыре значения:
Т.е. можно использовать с помощью text-decoration: надчеркивание (overline), перечеркивание (line-through) или подчеркивание (underline), ну, или вообще ничего не использовать (none). Некоторые Html элементы уже имеют по умолчанию оформление горизонтальной линией, например, (они по умолчанию подчеркиваются).
Поэтому выделять что-то еще подчеркиванием (кроме гиперссылок) не есть хорошо, ибо у пользователей в подсознании записано, что раз подчеркнуто (а еще и цветом выделено) — значит по этому можно кликнуть для перехода. Но выделяя подчеркиванием обычный текст, вы вводите пользователя в заблуждение и последующее за ним разочарование вашим ресурсом (он то думал, а оказалось что. ).
Нюансом в использовании Css правила text-decoration является то, что можно будет прописать сразу три (иди два) значения для любого Html элемента (опуская none) и в результате вы получите надчеркнуто-подчеркнуто-перечеркнутый фрагмент текста (прикольно звучит и смотрится, не правда ли?):
Text-decoration:underline overline line-through;
Значения для text decoration (если вы хотите использовать сразу несколько из них) нужно писать через символ пробел .
Vertical-align — вертикальное выравнивание
Дальше у нас идет вертикальное выравнивание — vertical-align. Практически для всех элементов в Html коде оно означает выравнивание между собой строчных элементов с текстом относительно их базовой линии. Правда, для это означает немного другое — выравниваться по вертикали будет весь контент, который находится в этих ячейках.
Для Css правила vertical-align можно использовать следующие значения:
Строки по умолчанию выравниваются по базовой линии. Вот смотрите, я применил к этому фрагменту текста увеличение шрифта и эти два фрагмента выровнялись по базовой (нижней) линии. А вертикальное выравнивание с помощью vertical-align как раз и предназначено именно для изменения способа выравнивания строк.
Например, если я для того же увеличенного фрагмента текста пропишу vertical-align:baseline, то никаких изменений не произойдет, т.к. значение baseline используется для этого Css правила по умолчанию.
Кстати, в качестве значений для него можно использовать и числа, а надпись vertical-align:0 будет означать тоже самое, что и vertical-align:baseline, т.е. значение baseline эквивалентно нулю. Следовательно, если мы хотим указать какой-либо сдвиг в вертикальном выравнивании, то этот сдвиг будем указывать относительно базовой линии (или же нуля).
Можно написать так:
И получим сдвиг фрагмента с увеличенным шрифтом вверх на 10 пикселей относительно базовой линии. Если напишем отрицательное значение:
То получим сдвиг фрагмента вниз относительно базовой линии. Из примеров видно, что из-за сдвига увеличилась высота строки, чтобы текст помещался в ней без наезда на соседнюю строку. Сдвиг можно также задавать в Em и Ex, ну, и в процентах, которые будут считаться от высоты линии этого элемента (помните в прошлой статье мы научились ее задавать с помощью ).
Для вертикального выравнивания содержимого ячеек таблиц в vertical-align следует использовать значения Top и Bottom для получения, соответственно, выравнивания содержимого по верхней и нижней границе ячейки (ну, а middle в ячейке таблицы используется как значение вертикального выравнивания по умолчанию).
А для шрифтовых элементов можно использовать text-top, text-bottom, middle. Давайте для примера применим к этому фрагменту текста значение:
Что получилось в результате? По базовой линии обычного текста выровнялась средняя линия увеличенного фрагмента, т.е. мы получили вертикальное выравнивание по средней линии. Для text-top и text-bottom будет все аналогично. Вот так text-top , а так text-bottom .
Значения Css свойства vertical-align sub и super соответствуют под- и надиндексу, которые имели место быть в чистом Html (до использования CSS свойств для визуального оформления).
Text-transform, letter-spacing, word-spacing и white-space
None используется по умолчанию и означает, что символы в тексте изменяться никак не будут — как написано в Html, так и будут отображаться. Значение Uppercase для text-transform позволит трансформировать все буквы фрагмента в заглавные ( пример показан в этом предложении , где использовалось правило text-transform:uppercase, а изначально буквы были написаны строчные).
Значение lowercase для Css правила text-transform позволит вам трансформировать все символы фрагмента в строчные, ну, а значение capitalize сделает все первые буквы слова заглавными ( пример в этом предложении — text-transform:capitalize). Т.е. с помощью text-transform можно сделать все что угодно с обычным текстом, а потом запросто все вернуть обратно.
Поэтому, если у вас, например, стоит задача сделать все заголовки написанными только заглавными буквами, то в Html пишите их обычно, а заглавными их сделаете уже в CSS через text-transform:uppercase. Потом, если вы решите что-то поменять назад, то достаточно внести только маленькое изменение в стили, а не в содержимое всех 100500 заголовков на вашем сайте.
По умолчанию и letter-spacing, и word-spacing имеют значение Normal, ну или это тоже самое, что ноль (т.е. расстояние между символами и словами никак не изменяется). Величину же изменения расстояния в этих правилах можно будет указывать только в пикселах, либо Em или Ex, но никак не в процентах.
Однако, можно использовать как положительные (разрежение символов или слов), так и отрицательные значения (сближение символов или слов). Например, можно «вот так разредить символы в этой фразе» с помощью следующего Css правила:
Или же можно «вот так сблизить символы в этой фразе» с помощью:
Тоже самое можно сказать и про word-spacing с одной лишь только разницей, что при этом расстояние будет изменяться уже между словами, как, например, в этой фразе, при помощи вот такой вот CSS конструкции :
Аналогично можно использовать в word-spacing отрицательные значения для уменьшения расстояния между словами.
Ну, и последнее на сегодня Css правило, которое позволяет определенным образом оформлять текст в Html коде — это white-space . Отвечает оно за отображение пробельных символов на веб странице, которые имели место быть при написании Html кода.
Как вы помните из статьи про , браузер при разборе кода объединяет все пробелы, символы переноса строк и табуляции в один единственный пробел, и осуществляет перенос строк на веб странице именно по пробельным символам, которые имели место быть в коде.
Так вот, white space может принимать одно из трех значений:
Понятно, что по умолчанию используется значение Normal и в этом случае все отображается так, как я описал чуть выше. А вот при использовании значения Pre мы получим полную аналогию с использованием , т.е. на вебстранице текст будет отображен со всеми теми лишними пробельными символами, которые имели место быть при написании кода и переносы браузер уже по ним сделать не сможет.
Ну, а значение nowrap просто запретит браузеру переносить по тем пробельным символам, которые он найдет внутри фрагмента с CSS правилом white-space:nowrap. Попробовать, как все это работает, вы сможете и сами, создав простенький Html файлик и заключив любой фрагмент текста в подобные теги:
Удачи вам! До скорых встреч на страницах блога сайт
Вам может быть интересно
List style (type, image, position) — Css правила для настройки внешнего вида списков в Html коде 
Позиционирование с помощью Z-index и CSS правило Cursor для изменения курсора мыши 
Padding, Margin и Border — задаем в CSS внутренние и внешние отступы, а так же рамкидля все сторон (top, bottom, left, right) 
Для чего нужен CSS, как подключить каскадные таблицы стилей к Html документу и основы синтаксиса этого языка 
Float и clear в CSS — инструменты блочной верстки 
CSS — что это такое, как таблицы каскадных стилей подключаются к Html коду с помощью Style и Link 
Единицы размеров (пиксели, Em и Ex) и наследование правил в CSS 
Селекторы тега, класса (class), Id и универсальные, а так же селекторы атрибутов в современном CSS 
Position (absolute, relative и fixed) — способы позиционирования Html элементов в CSS (правила left, right, top и bottom) 
Background в CSS (color, position, image, repeat, attachment) — все для задания цвета фона или фоновой картинки Html элементов
Обычно создатель сайта сам решает, какие буквы будут прописными, а какие строчными, исходя из правил правописания и собственных предпочтений. Тем не менее, процесс изменения регистров символов можно автоматизировать, используя свойство text-transform . Данное свойство может принимать четыре значения:
- none — текст пишется без изменений;
- capitalize — каждое слово будет начинаться с заглавного символа;
- lowercase — все символы становятся строчными (нижний регистр);
- uppercase — все символы становятся прописными (верхний регистр).
Например, следующее правило указывает, что заголовок H1 должен выводиться прописными буквами:
Автоматическое изменение регистра символов удобно задавать для аббревиатур, названий элементов, заголовков и других элементов текста , где требуется писать прописными или строчными символами.
Украшение текста: свойство text-decoration
Свойство text-decoration позволяет задать тексту дополнительное оформление. Значениями данного свойства являются константы none, underline, overline, line-through и blink , позволяющие отобразить обычный текст, провести линию над, под или через текст, а также сделать текст мигающим. Пример использования различных значений данного свойства приведен на рисунке 11.4 .
Наиболее распространенным применением свойства text-decoration является изменение используемого по умолчанию подчеркивания ссылок. Например, следующее правило указывает, что ссылки должны подчеркиваться:
Интервал между словами: свойство word-spacing
Чтобы задать интервал между словами в тексте, используется свойство word-spacing . Значения данного свойства можно задать с помощью ключевого слова normal , которое используется по умолчанию и задает стандартный интервал для текущего шрифта. Для задания интервала в дополнение к стандартному можно указать значение в любых доступных единицах CSS, причем значение может быть и отрицательным.
Так, следующее правило увеличивает интервал между словами в заголовке H1 на 1em :
Выравнивание текста: свойство text-align
Выравниванием называется размещение левого или правого края блока текста вдоль невидимой вертикальной линии. Для выравнивания текста используется свойство text-align . Допустимыми значениями данного свойства являются left, right, center и justify , задающие выравнивание по левому краю, по правому краю, по центру и по ширине соответственно.
Следующее правило устанавливает выравнивание по центру всех элементов, содержащихся в элементе DIV :
Интерлиньяж: свойство line-height
Интерлиньяжем называется расстояние между базовыми линиями близких друг к другу строк. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и автоматически определяется браузером. Но это значение может быть изменено с помощью свойства line-height . Заданное по умолчанию значение normal заставляет браузер вычислять расстояние между строками автоматически. Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста. В качестве значений данного свойства допустимо также использовать любые единицы длины, принятые в CSS. Разрешается также использовать процентную запись, причем в этом случае за 100% принимается высота шрифта. Отрицательное значение межстрочного расстояния не допускается.
Интервал между буквами: свойство letter-spacing
Браузер автоматически подбирает интервалы между символами, исходя из размера и типа шрифта. В некоторых случаях необходимо подкорректировать расстояние между буквами. Для управления межбуквенным интервалом используется свойство letter-spacing . В качестве значений данного свойства могут использоваться любые единицы длины, принятые в CSS, однако рекомендуется использовать относительные единицы, основанные на размере шрифта (em и ех). В отличие от межстрочного интервала, свойство letter-spacing допускает использование отрицательного значения, однако в этом случае надо убедиться, что сохраняется читабельность текста.
Следующее правило увеличивает интервал между символами в заголовке H1 на 0.5em .
Свойство CSS text-align отвечает за горизонтально выравнивание текста, а также картинок и других элементов. У свойства есть 4 возможных варианта выравнивания.
Синтаксис CSS text-align
- center — выравнивание по центру области (например ширина области 500 пикселей, значит будет выравнивание по линии 250 пикселей)
- justify — растягивание текста по всей ширине области
- left — выравнивание по левому краю
- right — выравнивание по правому краю
- inherit — принять значение предка (родителя)
Чаще всего эти свойства применяются в блоках
Примечание:
Есть также свойство vertical-align , которое отвечает за вертикальное выравнивание.
Как сделать выравнивание текста в html
Пример №1.
Выравнивание текста по левому краю. Действуют по умолчанию.
Выравнивание текста по левому краю
Пример №2. Выравнивание текста и картинки по центру
Выравнивание текста по центру. Зачастую используются для заглавия статей или для вывода картинок по центру.
На странице преобразуется в следующее
Выравнивание текста по левому краю
Пример №3. Выравнивание текста по правому краю
Выравнивание текста по правому краю.
На странице преобразуется в следующее
Выравнивание текста по правому краю
Пример №4. Выравнивание текста по ширине всей области
Выравнивание текста по всей ширине. Получается, что выравнивание происходит и полевому, и по правому краю. Браузер автоматически добавляет пробелы.
На странице преобразуется в следующее
Выравнивание текста по ширине всей области
Иногда text-align: justify; может не работать. Это связано с наследованием и даже с работой браузера. В целом не рекомендуется использовать этот параметр.
Вместо свойства text-align можно также использовать атрибут align , который пишется вместе с тегом. Его можно использовать у различных тегов. Например:
Выравнивание текста по ширине всей области
Разница в тегах
В том, что последний делает переход на новую строку (вертикальный отступ), а div не делает.
Выравнивание по правому краю css. Как в HTML сделать выравнивание текста по центру, ширине, краям страницы
В случае HTML-документов теги работают больше на разметку контента, чем на указание того, как он должен быть представлен. Больший контроль над представлением достигается с помощью стилей. В этой статье я рассмотрю те стили, которые связаны с форматированием абзаца в HTML .
В HTML позволяет задать абзацы, а атрибут align выравнивает их по левому краю, по правому краю, по центру или по ширине. Помимо них мы будем использовать глобальный атрибут style .
Выравнивание абзаца
Можно выровнять абзац, используя атрибут align со следующими значениями:
Скопируйте следующий код в файл .html .
Выравнивание абзаца с помощью атрибута Style
Этот абзац выровнен по центру
Этот абзац выровнен по правому краю
Этот абзац выводится в окне браузера, выровненным по ширине. Распределенный по ширине абзац выравнивается по правому и по левому краю за счет добавления дополнительных пробелов. Вы можете видеть, что края выровненного по ширине абзаца соответствуют краям абзацев, выровненных по левому и по правому краю. В выровненном по левому краю абзаце левый край является ровным, а в абзаце, выровненном по правому краю — правый. Вы видите, что у этого абзаца оба края являются ровными? Это достигается благодаря стилю text-align:justify.
В окне браузера HTML код абзаца выглядит следующим образом.
Интервалы между строками
Вы можете управлять междустрочным интервалом абзаца с помощью style=line-height . Используйте атрибут style со следующими значениями:
Ниже приведен пример HTML-кода , который выводит абзацы с различными междустрочными интервалами:
Установка междустрочного интервала с помощью атрибута Style
В этом параграфе используются два значения для атрибута style. Первый line-height:1.5 определяет полуторный междустрочный интервал для абзаца, а второе значение text-align:justify определяет, что текст абзаца должен распределяться по ширине.
Этот абзац имеет двойной междустрочный интервал и выровнен по ширине. line-height:2 определяет двойной интервал. Атрибут style не обязательно должен иметь два значения. Но если вам нужно задать два значения, вы можете сделать это, разделив их точкой с запятой.
Похожие публикации:
- Как вставить данные из одной таблицы в другую sql
- Как вывести данные из двух таблиц в sql
- Как сделать обтекание текста в html
- Как сделать полупрозрачный фон в css
Способы подчеркивания в CSS
Существует куча разных способов оформления подчеркивания. Возможно, вы вспомните статью Марсина Вичари “Crafting link underlines” на Medium. Разработчики Medium не пытаются сделать что-то безумное, они просто хотят создать красивую линию под текстом.
Это самое простое подчеркивание, но у него правильный размер и оно не перекрывает выносные элементы букв. И оно однозначно лучше дефолтного подчеркивания в большинстве браузеров. Medium пришлось столкнуться со сложностями для достижения своего стиля в вебе. Два года спустя, нам все также сложно сделать красивое подчеркивание.
Цели
Что не так с привычным text-decoration: underline ? Если речь идет об идеальном сценарии, подчеркивание должно делать следующее:
- позиционироваться ниже базовой линии;
- пропускать выносные элементы;
- изменять цвет, толщину и стиль линии;
- работать с многострочным текстом;
- работать на любом фоне.
Я считаю, что это все разумные требования, но насколько я знаю, не существует интуитивного способа добиться этого с помощью CSS.
Подходы
Так что это за различные способы, которыми мы можем реализовать подчеркивание в вебе?
Вот те, которые я рассматриваю:
- text-decoration ;
- border-bottom ;
- box-shadow ;
- background-image ;
- фильтры SVG;
- Underline.js (canvas);
- text-decoration-* .
Разберем эти способы один за другим и поговорим о плюсах и минусах каждого из них.
text-decoration
text-decoration это самый очевидный способ подчеркивания текста. Вы применяете одно свойство и этого достаточно. На небольших размерах шрифта это может выглядеть вполне прилично, но увеличьте размер шрифта и такое подчеркивание начинает выглядеть неуклюже.
Самая большая проблема с text-decoration это отсутствие настроек. Вы ограничены цветом и размером шрифта текста и у вас нет кроссбраузерного способа изменить это. Мы еще поговорим об этом подробнее.
- легко использовать;
- позиционируется ниже базовой линии;
- по умолчанию пропускает нижние выносные элементы в Safari и iOS;
- подчеркивает многострочный текст;
- работает на любом фоне.
- не пропускает нижние выносные элементы во всех остальных браузерах;
- не позволяет изменять цвет, толщину или стиль линии.
border-bottom
border-bottom предлагает хороший баланс между простотой и настраиваемостью. Этот подход использует старое доброе свойство CSS для границы, это значит, что вы можете легко изменять цвет, толщину и стиль.
Вот так border-bottom выглядит у строчных элементов.
Главный недостаток — это расстояние линии подчеркивания от текста, она целиком ниже выносных элементов. Вы можете исправить это, задав элементам свойство inline-block и уменьшив line-height , но тогда вы потеряете возможность оборачивать текст. Хорошо для отдельных строчек, но больше нигде непригодно.
Дополнительно, мы можете использовать text-shadow , чтобы перекрыть часть линии рядом с подстрочными элементами, имитируя это при помощи того же цвета, что и фон. То есть эта техника работает только на простом одноцветном фоне, без градиентов, паттернов или изображений.
На данный момент мы уже используем целых четыре свойства для оформления одной строчки. Это намного больше работы, чем просто добавить text-decoration .
- может пропускать выносные элементы с помощью text-shadow ;
- может изменять цвет, жирность и стиль линии;
- позволяет использовать переходы и анимации цвета и жирности;
- работает с многострочным текстом, если не применено значение inline-block ;
- работает на любом фоне, если не использовать text-shadow .
- позиционируется слишком низко и перемещается сложным способом;
- используется много дополнительных свойств для правильной работы;
- при использовании text-shadow выделение текста выглядит уродливо.
box-shadow
box-shadow рисует подстрочную линию за счет двух внутренних теней: одна создает прямоугольник, а вторая скрывает его часть. Это значит, что вам нужен однотонный фон для того, чтобы это работало.
Вы можете использовать тот же трюк с text-shadow для заполнения пропусков между подчеркиванием и выносными элементами. Но если цвет подчеркивания отличается от цвета текста — или он просто достаточно тонкий, линия не будет сталкиваться с выносными элементами так, как при использовании text-decoration .
- может позиционироваться ниже базовой линии;
- может пропускать выносные элементы за счет text-shadow ;
- позволяет изменять цвет и толщину линии;
- работает с многострочным текстом.
- не позволяет изменять стиль подчеркивания;
- работает не на любом фоне.
background-image
Метод с background-image наиболее близок к нашим желанием и обладает минимумом недостатков. Идея состоит в использовании linear-gradient и background-position для создания изображения, повторяющегося под строчками текста.
Для работы этого подхода необходимо, чтобы текст был в стандартном режиме display: inline; .
Следующий вариант обходится без linear-gradient , для эффектов вы можете добавить свое фоновое изображение.
- может позиционироваться ниже базовой линии;
- может пропускать выносные элементы за счет text-shadow ;
- допускает изменение цвета, толщины и стиля линии;
- работает с кастомными изображениями;
- обертывает несколько строчек текста;
- работает на любом фоне, если не применять text-shadow .
- размер изображения может изменяться в зависимости от разрешения экрана, браузера и увеличения.
Фильтры SVG
Я достаточно много поиграл с этим способом. Вы можете создать строчный фильтр SVG, который рисует линию и затем расширяет текст для маскировки части линии, которую мы хотим сделать прозрачной. Затем вы можете задать фильтру id и ссылаться на него в CSS примерно так filter: url(‘#svg-underline’) .
Преимущество этого подхода в том, что прозрачность достигается без применения text-shadow , то есть мы пропускаем выносные элементы на любом фоне, включая градиенты и фоновые изображения! Это работает только на отдельной строке текста, учитывайте это.
Вот как это выглядит в Chrome и Firefox:
Поддержка в IE, Edge и Safari проблематична. Сложно тестировать поддержку фильтра SVG в CSS. Вы можете использовать директиву @supports с filter , но это проверит лишь работу ссылки на фильтр, но не работу самого фильтра. Мои попытки завершились муторным определением возможностей браузера, это ощутимый недостаток метода.
- может позиционироваться ниже базовой линии;
- может пропускать выносные элементы;
- допускает изменение цвета, толщины и стиля линии;
- работает на любом фоне.
- не работает с многострочным текстом;
- не работает в IE, Edge и Safari, но вы можете использовать text-decoration в качестве запасного варианта, в Safari он смотриться достойно.
Underline.js (Canvas)
Underline.js завораживает. Я считаю впечатляющим то, что сделала Вентин Жанг за счет владения JavaScript и внимания к деталям. Если вы не видели техническое демо Underline.js, бросайте читать и уделите ему минуту времени. Есть также ее девятиминутный доклад о том, как это работает, но я опишу кратко: подчеркивание рисуется с помощью элементов . Это новый подход, который работает на удивление хорошо.
Несмотря броское название, Underline.js это всего лишь техническое демо. Это значит, что вы не можете просто взять и подключить это в свой проект без изменения кода.
Я решил упомянуть об этом в доказательство концепции, что обладает потенциалом создания прекрасных интерактивных подчеркиваний, но чтобы это заработало, вам надо писать свой JavaScript.
Новые свойства text-decoration
Вы помните, что я обещал подробнее поговорить о text-decoration . Время пришло.
Само по себе это свойство отлично работает, но вы можете добавить несколько экспериментальных свойств для настройки внешнего вида подчеркивания.
- text-decoration-color
- text-decoration-skip
- text-decoration-style
Но слишком сильно не радуйтесь… Поддержка в браузерах — как всегда. Такие дела.
text-decoration-color
Свойство text-decoration-color позволяет вам изменять цвет подчеркивания отдельно от цвета текста. Поддержка этого свойства лучше, чем можно было ожидать — оно работает в Firefox и с префиксом в Safari. Вот в чем загвоздка: если у вас есть выносные элементы, Safari поместит подчеркивание поверх текста.
text-decoration-skip
Свойство text-decoration-skip включает пропуск выносных элементов в подчеркиваемом тексте.
Это свойство нестандартное и работает сейчас только в Safari, с префиксом -webkit- . Safari по умолчанию активирует это свойство, поэтому выносные элементы всегда не перечеркиваются.
Если вы используете Normalize, то учтите, что последние версии отключают это свойство ради последовательного поведения браузеров. И если вы хотите, чтобы подчеркивание не затрагивало выносные элементы, вам надо вручную активировать его.
text-decoration-style
Свойство text-decoration-style предлагает такие же возможности оформления, что и у свойства border-style , добавляя кроме этого стиль wavy .
Вот список доступных значений:
Сейчас свойство text-decoration-style работает только в Firefox, вот скриншот из него:
Чего не хватает
Серия свойств text-decoration-* намного более интуитивна в использовании, чем остальные свойства CSS для оформления подчеркивания. Но если взглянуть внимательнее, то для удовлетворения наших запросов не хватает способов задать толщину или позицию линии.
После небольшого исследования, я нашел еще пару свойств:
- text-underline-width
- text-underline-position
Судя по всему, они относятся к ранним черновикам CSS, но их так и не реализовали в браузерах из-за отсутствия интереса.
Выводы
Так какой же способ подчеркивания лучший?
Для небольшого текста я рекомендую использовать text-decoration с оптимистичным добавлением text-decoration-skip . Это выглядит немного безвкусно в большинстве браузеров, но подчеркивание в браузерах было таким всегда и люди просто не обратят внимания. Плюс всегда есть шанс, что при наличии у вас терпения, это подчеркивание когда-нибудь будет выглядеть хорошо без необходимости для вас что-то менять, так как это сделают в браузерах.
Для основного текста имеет смысл использовать background-image . Этот подход работает, выглядит замечательно и для него есть миксины Sass. Вы, в принципе, можете пропустить text-shadow , если подчеркивание тонкое или отличается цветом от текста.
Для отдельных строк текста используйте border-bottom вместе с любыми дополнительными свойствами.
А если вам нужен пропуск выносных элементов на фоне градиента или изображения, попробуйте использовать фильтры SVG. Или просто избегайте использовать подчеркивание.
В будущем, когда поддержка в браузерах станет лучше, единственным ответом будет набор свойств text-decoration-* .
Также рекомендую обратить внимание на статью Бенджамина Вудроффа CSS Underlines Suck, в которой рассматриваются те же вопросы.