Как расширить текст в css

font-stretch¶

Свойство font-stretch устанавливает узкое, нормальное или широкое начертание шрифта, что позволяет уплотнять или расширять текст.

Демо¶

Шрифт и Цвет

• font
• font-family
• font-feature-settings
• font-kerning
• font-language-override
• font-optical-sizing
• font-size
• font-size-adjust
• font-stretch
• font-style
• font-synthesis
• font-variant
• font-variant-alternates
• font-variant-caps
• font-variant-east-asian
• font-variant-ligatures
• font-variant-numeric
• font-variant-position
• font-variation-settings
• font-weight
• line-height

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

/* Keyword values */ font-stretch: ultra-condensed; font-stretch: extra-condensed; font-stretch: condensed; font-stretch: semi-condensed; font-stretch: normal; font-stretch: semi-expanded; font-stretch: expanded; font-stretch: extra-expanded; font-stretch: ultra-expanded; /* Percentage values */ font-stretch: 50%; font-stretch: 100%; font-stretch: 200%; /* Global values */ font-stretch: inherit; font-stretch: initial; font-stretch: revert; font-stretch: revert-layer; font-stretch: unset; 

Значения¶

Влияние разных значений font-stretch на вид букв в тексте показано на рис. 1.

Примечание¶

Браузеры применяют свойство font-stretch не ко всем шрифтам, поэтому уплотнение или расширение текста может не работать с некоторыми популярными и распространёнными гарнитурами шрифтов.

font-stretch: normal; 

Применяется ко всем элементам

Спецификации¶

Поддержка браузерами¶

Can I Use css-font-stretch? Data on support for the css-font-stretch feature across the major browsers from caniuse.com.

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

 html> head> meta charset="utf-8" /> title>font-stretchtitle> style> p  font-size: 5em; font-family: 'Myriad Pro'; > style> head> body> p> span style="font-stretch: ultra-condensed">Бspan> span style="font-stretch: extra-condensed">Бspan> span style="font-stretch: condensed">Бspan> span style="font-stretch: semi-condensed">Бspan> span style="font-stretch: normal">Бspan> span style="font-stretch: semi-expanded">Бspan> span style="font-stretch: expanded">Бspan> span style="font-stretch: extra-expanded">Бspan> span style="font-stretch: ultra-expanded">Бspan> p> body> html> 

Как создать перенос слов CSS — абзацы с переносом слов CSS

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

Создаем перенос слов

Текст без переносов

Если кто-то не понял о чем идет речь, вот пример без использования переноса слов:

С переносами

А вот пример, когда мы используем перенос слов CSS:

Круто! А как это сделать в коде?

Сейчас, я думаю, все прекрасно понимают что мы будем делать. Поэтому пора узнать о новом свойстве, которое есть в CSS3!

А пишется это свойство вот так — hyphens .

Просто, не так ли? Но для каждого из браузеров есть свои префиксы, поэтому в коде это выглядит так:

1 2 3 4 5 6 7 8

p { text-align: justify; /* текст необходимо растянуть на всю ширину блока, чтобы в дальнейшем переносить */ /* свойство переноса слов для разных браузеров */ -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }

Не забывайте растягивать текст по всей ширине блока с помощью свойства text-align: justify , иначе нужного результата вы не увидите.

Вывод

Короткий и простой урок, который позволит сделает ваш сайт еще более «удобным» для пользователя. Ведь мы ежедневно читаем огромное количество информации в сети — так давайте же сделаем этот процесс максимально приятным для посетителей! Ведь перенос слов CSS сделать очень легко, добавив пару строчек кода в ваш файл стилей.

Успехов!

Юрий Немец

Создатель проекта «sitehere.ru». Сооснователь компании «Exore». В интернет-маркетинге с 2013 года. Специализируется на контент-маркетинге и SEO. Автор мини-книги «Как раскрутить сайт с нуля до 32 000 посетителей в месяц».

Личный telegram-канал о digital-маркетинге для руководителей.

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

Отправить статью

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

Введите Email ниже:

Ссылка на статью отправлена вам на Email.

17 комментариев к записи

fotodizart
Интересное и главное простое решение, надо запомнить, возможно пригодится в работе.
Юрий, спасибо! Очень ценная информация. Но как понять для какого браузера выбрать нужный код?

Елена, вот список префиксов, которые работают с этим свойством в разных браузерах:

p -webkit-hyphens: auto; /* для браузера Chrome и Safari */
-moz-hyphens: auto; /* для браузера Firefox */
-ms-hyphens: auto; /* для браузера Internet Explorer 10 */
hyphens: auto;
>
Но вам нужно писать обязательно все 4 свойства! Чтобы во всех этих браузерах был перенос слов.

Спасибо, Юрий!

Ведь мы ежедневно читаем огромное количество информации в сети — так давайте же сделаем этот процесс максимально приятным

вот и начали бы с себя..
Вам неудобно читать текст на моём сайте?
ни одного переноса в статье нет)

Переносы слов еще зависят от разрешения монитора: может быть такая ситуация, что на большом мониторе нет необходимости переносить слова, потому что они и так хорошо смотрятся. Для примера я уменьшил ширину окна браузера (фото ниже):

Всё правильно человек написал:

Только это пока рабочий проект (см. – https://webref.ru/css/hyphens ), поэтому некоторый браузеры поддерживают это свойство, а некоторые – нет. На большом мониторе под Windows – не работает, а вот на планшете Lenovo Yoga Tablet 2 – переносы работают…

Юрий, спасибо! Но у меня не перенос слов получился, а просто текст стал ровнее (каждая строчка точно вписывается от первой буквы первого слова, до последей буквы последнего в каждой строке), поразительно!

Я смотрю, это за счет увеличения пробелов. Видно у меня там еще какое-то правило прописано.

В приличных печатных изданиях переносы слов осуществляются по правилам русского языка. Видимо, CCS3 применяет какой-то общий алгоритм переноса для всех языков?

Надо для меню задать правило — переносим на новую строку все слова кроме первого. 1 Всегда или 2. Когда не помещаются Как реализовать?

Виноват. Не для меню, а для названия модуля.

Ребят, на самом деле, если у вас не работают переносы, дело тут не в ширине окна браузера. Словарь переносов хранится в браузере и подключается только при наличии атрибута lang с кодом языка. Так, для русского языка следует добавить lang=»ru» к элементу или непосредственно к абзацу текста. Удачи!

Переносы не работают в Chrome и Opera.

Единственное кросс-браузерное решение — это вставить мягкие переносы (мнемокод «­») в места, где вы допускаете вставлять дефис и разбивать слово с последующим переносом в случае возможности (если ширина позволяет). Можно воспользоваться сервисом автоматической расстановки мягких переносов , вставляете, например, там текст «расставить переносы правильно» и получаете готовый html — «рас­ста­вить пе­ре­но­сы пра­виль­но» его вставляете у себя на сайте. Всё будет переноситься предсказуемо и кросс-браузерно. Можете в сервисе ограничить длину слова в которых необходимо расставить мягкие переносы, если хотите разбивать только длинные слова. Потом можно это текст опять редактировать, просто вставив на том же сервисе туда, где его скопировали и т.д.

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

© 2020 «Exore LTD»

• +7 (495) 128-22-59
• Заказать звонок
• info@sitehere.ru
• Карта сайта
• Правила использования сайта
• Политика конфиденциальности

• Услуги
• Продающий лендинг
• Настройка рекламы в социальных сетях
• Настройка контекстной рекламы Яндекс Директ и Google Adwords
• Разработка интернет-магазина
• Разработка квиз сайта
• SEO консультация

• Полезные материалы
• Блог
• [Чек-лист] 15 способов увеличить заявки с квиза в 2 раза
• [Книга] Как раскрутить сайт с нуля до 32 000 посетителей в месяц?
• Тесты по Digital-маркетингу

• Напишите нам
• Контакты
• Вакансии
• Кейсы

• Инструменты
• ROI (ROMI) калькулятор
• Чат-бот с сервисами для предпринимателей и маркетологов