html — Как я могу выровнять текст, который не умещается в первой строке, по правому краю в CSS, как это делают в поэзии?
Я добавляю стихи на свой сайт. Проблема в том, что при уменьшении размера экрана строки стихотворения рвутся.
Я хочу показать часть строки, которая идет после разрыва строки, как в сборниках стихов, когда длина строки стиха не соответствует ширине страницы.
Вот пример:
The quick brown fox jumps over the
lazy dog
Первая строка выровнена по левому краю, вторая — по правому. (Конечно, это будет происходить только на маленьких экранах.)
Есть ли способ сделать это повторяемым? Это не разовое мероприятие; Я пытаюсь создать стандарт с классами.
Свободный перевод вопроса How can I align the text that didn’t fit the first line to right in CSS, like they do in poetry? от участника @bedirhangn.
- html
- css
- вёрстка
1
Используйте text-align-last
Поддержка браузерами
.box { width: 350px; border: 1px solid #000; resize:horizontal; overflow:auto; } .box * { /*text-align:justify; раскомментируйте это, чтобы увидеть эффект `justify`, тоже неплохо */ text-align-last: right; display:inline-block; }
box {
width: 350px;
border: 1px solid #000;
resize:horizontal;
overflow:auto;
}
.box * {
/*text-align:justify; раскомментируйте это, чтобы увидеть эффект `justify`, тоже неплохо */
text-align-last: right;
display:inline-block;
}<div> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div><br> <div>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</div> </div>
Свободный перевод ответа от участника @Temani Afif.
Существует псевдоэлемент CSS для выбора первой строки текста, который вы можете использовать здесь:
::first-line
Update: несмотря на то, что селектор поддерживается во всех основных браузерах, похоже, что некоторые браузеры не позволяют применять выравнивание текста с этим селектором. Так что, это ненадежное кроссбраузерное решение (пока?), Я оставлю его здесь на случай, если оно кому-то пригодится или станет действительным в будущем.
#wrapper {
display: block;
width: 350px;
height: auto;
border: 1px solid #000;
}
#wrapper span {
display: block;
text-align: right;
}
#wrapper span::first-line {
text-align: left;
}<div> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span>
<span>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</span>
<span>Duis aute irure dolor in reprehenderit in voluptate velit esse.</span>
</div>Свободный перевод ответа от участника @DBS.
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Лучшие практики выравнивания текста в интерфейсе
Выравнивание текста — небольшая, но важная часть интерфейса.
Выравнивание влияет на то, как наш мозг сканирует контент на экране. Правильное выравнивание текста — один из самых ярких показателей профессионально созданного цифрового продукта.
Любой интерфейс на 90% текстовый. Вот почему, когда вы видите правильно выровненную типографику, у вас создается впечатление, что вы используете более продуманный интерфейс. А когда что-то не на своем месте, это сразу же бросается в глаза и вредит нашему восприятию.
В этой статье я хочу поделиться практическими советами, которые помогут создать аккуратно выровненную типографику для вашего интерфейса.
Совет 1. Избегайте выравнивания по центру для длинного текста
Если текст длиннее двух или трех строк, всегда рекомендуется не использовать выравнивание по центру.
Когда вы выравниваете по центру длинный текст, вы заставляете читателя делать дополнительные движения глаз с обеих сторон содержимого. Это вызывает ненужную утомляемость глаз и приводит к снижению внимания при чтении.
Совет 2.
Всегда выравнивайте длинный текст по левому краюТекст, выровненный по левому краю, улучшает читаемость контента, поэтому все книги, статьи и газеты написаны именно так. Выровненный по левому краю текст помогает избежать ненужных движений глаз, что значительно упрощает отслеживание всей страницы.
Примечание. При локализации пользовательского интерфейса для языков, идущих справа налево, таких как арабский, иврит или персидский, используйте выравнивание по правому краю вместо левого.
Совет 3. Используйте выравнивание по центру только для заголовков или небольших блоков текста.
Используйте выравнивание по центру, если заголовок состоит из одной-двух строк. Если текстовый блок длиннее двух-трех строк, он всегда будет выглядеть лучше с выравниванием по левому краю.
Если вам нужно центрировать более одного блока текста, но один из них немного длиннее, то лучшее решение — изменить/переписать контент, чтобы сделать его короче:
Совет 4.
Используйте выравнивание выступа для соединения с элементами пользовательского интерфейса.Используйте выступ, чтобы установить четкую визуальную иерархию для элементов пользовательского интерфейса, которые не имеют такой же визуальный вес, как текст — таких как иконки, маркеры или кавычки.
Выступ помогает создать четкую траекторию глаз для текста, устраняя зигзагообразные скачки глаз.
Совет 5. Выровняйте данные и числа по правому краю
При разработке таблиц, карточек или информационных панелей выровняйте числа и время по правому краю. Цифры легче сравнивать друг с другом, если они выровнены по правому, а не по левому краю.
Совет 6. Балансируйте пустые пространства для текста с выравниванием по ширине
Выровненный по ширине текст отлично подходит для печати, но для Интернета, когда вы хотите создать более формальную атмосферу, между словами может остаться много неудобных пробелов. Чтобы избежать этих пробелов, рассмотрите возможность расстановки переносов.
В различных платформах есть свойства текста, которые управляют расстановкой переносов. Обратите внимание, что они зависят от языка. Они могут сами находить возможности вставки дефиса, но поддерживаются не все языки, и поддержка зависит от конкретной платформы или даже браузера.
Примечание. Если расстановка переносов невозможна, игнорируйте выровненный по ширине текст и придерживайтесь выравнивания текста по левому краю.
Спасибо за чтение!
Оригинал
Если вы нашли опечатку — выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать [email protected].
Как выровнять текст в HTML?
Обзор
HTML означает язык гипертекстовой разметки. Он состоит из двух слов — гипертекст и разметка. Гипертекст используется для определения связи между различными веб-страницами, тогда как он называется языком разметки, поскольку HTML определяет структуру и макет веб-страницы.
Теперь эта структура и макет страницы также включают в себя выравнивание текста в HTML, чтобы содержимое выглядело структурированным и более читабельным.
В HTML мы используем свойство text-align для определения выравнивания текста на веб-странице. В основном он определяет горизонтальное выравнивание текста на веб-странице.
Свойство text-align принимает три значения: по левому краю, по правому краю, по центру и по ширине. Поэтому мы можем разместить наш текст слева, справа и по центру, а также в соответствии с нашими требованиями.
Предварительные требования
Чтобы выровнять текст или блок кода в HTML, необходимо иметь базовые представления о HTML и CSS.
Вы можете обратиться к следующим статьям для ознакомления.
- Введение в HTML
- HTML-теги
- Что такое CSS?
Text Alignment
HTML предоставляет атрибут с именем align, который используется для указания выравнивания блока текста и выравнивания текста на веб-странице. Этот атрибут также принимает значения слева, справа, по центру и по ширине. Кроме того, он поддерживает элементы col, colgroup, tbody, td, tfoot, th, thead, tr для выравнивания.
Однако использование атрибута align устарело для всех остальных элементов HTML. Чтобы выровнять остальные элементы в HTML, мы должны использовать CSS.
Чтобы выровнять текст в HTML с помощью CSS, мы будем использовать свойство text-align, предоставляемое CSS. Свойство text-align в основном является свойством CSS, которое используется для указания горизонтального выравнивания текста в HTML.
Однако это свойство можно использовать в любых встроенных, внешних или внутренних таблицах стилей. Однако здесь мы обсудили использование свойства text-align во внутренней и встроенной таблицах стилей.
Свойство text-align принимает значение, которое может быть слева, справа или по центру, что выравнивает текст в соответствии с предоставленными значениями. Однако со встроенным CSS нам нужно использовать это свойство text-align внутри атрибута стиля HTML.
Как выровнять текст в HTML?
Чтобы выровнять текст в HTML, мы можем использовать любое из значений слева, справа, по центру и по ширине для атрибута align в HTML.
Однако ниже приведены следующие шаги по выравниванию текста в HTML или использованию атрибута align в HTML.
- Прежде всего, мы помещаем текст в элемент HTML, который необходимо выровнять.
<тело>
Добро пожаловать на страницу
Текст « Добро пожаловать на страницу » необходимо выровнять, поэтому он помещается внутри элемента p в коде.
- После чего мы используем атрибут align в элементе html для выравнивания текста.
<тело>
Добро пожаловать на страницу
- Внутри атрибута align HTML мы можем использовать любое из значений left, right, center или justify для выравнивания текста.
Выравнивание текста по левому краю
Чтобы выровнять текст в HTML по левому краю веб-страницы, мы присвоим атрибуту выравнивания в HTML значение по левому краю.
Давайте посмотрим код для выравнивания текста в HTML по левой стороне веб-страницы.
<тело>
Текст, выровненный по левому краю
Вывод:
Выравнивание текста по центру
Чтобы выровнять текст в HTML по центру веб-страницы, мы назначим центр значения атрибуту align в HTML.
Давайте посмотрим код для выравнивания текста в HTML по центру веб-страницы.
<тело>
Текст с выравниванием по центру
Вывод:
Выравнивание текста по правому краю
Чтобы выровнять блок текста по правому краю веб-страницы, мы присвоим значение right атрибуту align в HTML.
Давайте посмотрим код для выравнивания текста в HTML по правой стороне веб-страницы.
<тело>
Текст, выровненный по правому краю
Вывод:
Примечание — Атрибут выравнивания HTML поддерживает элементы col, colgroup, tbody, td, tfoot, th, thead, tr.
Использование свойства таблицы стилей
Давайте рассмотрим несколько примеров, чтобы понять атрибут text-align. Однако здесь мы используем атрибут text-align для выравнивания текста в HTML.
Выравнивание текста с помощью внутренней таблицы стилей
В этом примере мы будем размещать первый текст слева, второй — по центру, а третий — справа. Чтобы выровнять текст в HTML по определенной стороне, мы назначим соответствующее значение атрибуту text-align.
Давайте посмотрим код выравнивания текста в HTML-
<голова>
Выравнивание текста
<стиль>
#левый{
выравнивание текста: по левому краю;
}
#центр{
выравнивание текста: по центру;
}
#верно{
выравнивание текста: вправо;
}
<тело>
Эй! Добро пожаловать на страницу.
Эй! Добро пожаловать на страницу.
Эй! Добро пожаловать на страницу.
Вывод:
Как видно из приведенного выше вывода, первый текст выровнен по левому краю страницы, второй по центру, а третий по правому краю веб-страницы.
Выравнивание текста с помощью встроенной таблицы стилей
Мы также можем указать свойство text-align с помощью встроенной таблицы стилей CSS. Во встроенном стиле мы указываем свойство text-align с самим элементом HTML, используя атрибут стиля.
Давайте посмотрим пример кода для выравнивания текста в HTML.
<голова>Выравнивание текста <тело>Текст с выравниванием по левому краю
Текст с выравниванием по центру
Выровненный по правому краю текст
Вывод:
Поэтому, как вы можете видеть в приведенном выше коде, мы указали свойство text-align внутри атрибута стиля с самим элементом h3.
Примечание: Значение свойства text-align по умолчанию — left.
Заключение
- Атрибут align используется для выравнивания блока текста в HTML. Однако он устарел в HTML5.
- Свойство CSS text-align используется для выравнивания блока текста в HTML.
- Принимает любое из четырех значений — по центру, слева, справа или по ширине.
- Используется для указания горизонтального выравнивания веб-страницы.
- Однако, если вы не укажете свойство text-align, текст по умолчанию будет выровнен по левому краю.
- Вы можете указать свойство text-align в любой из таблиц стилей CSS.
Выравнивание или выравнивание текста — служба поддержки Майкрософт
Word для Microsoft 365 для Mac Word 2021 для Mac Word 2019 для Mac Word 2016 для Mac Word для Mac 2011 Дополнительно…Меньше
Некоторое содержимое этого раздела может быть неприменимо к некоторым языкам.
Выравнивание текста — это атрибут форматирования абзаца, определяющий внешний вид текста во всем абзаце.
Например, в абзаце, выровненном по левому краю (наиболее распространенное выравнивание), текст выравнивается по левому полю. В выравниваемом абзаце текст выравнивается по обоим полям.
Выровнять текст по левому краю
Центральный текст
Выровнять текст по правому краю
Выравнивание текста по ширине
Распространить текст
Выровнять текст по левому краю, по центру или по правому краю
Щелкните в любом месте абзаца, который вы хотите выровнять.
org/ListItem»>На вкладке Главная в группе Параграф выполните одно из следующих действий:
— | Нажмите |
|---|---|
Выровнять текст по левому краю | Выровнять текст по левому краю |
Центральный текст | Текст по центру |
Выровнять текст по правому краю | Выровнять текст по правому краю |
Текст по ширине
При выравнивании текста между словами добавляется пробел, чтобы оба края каждой строки были выровнены по обоим полям.
Последняя строка абзаца выравнивается по левому краю.
Щелкните в любом месте абзаца, который вы хотите выровнять.
На вкладке Главная в группе Абзац нажмите Выровнять текст по ширине .
Важно: Office для Mac 2011 больше не поддерживается . Перейдите на Microsoft 365, чтобы работать где угодно с любого устройства и продолжать получать поддержку.
Обновить сейчас
Выровнять текст по левому краю, по центру или по правому краю
org/ItemList»>Щелкните в любом месте абзаца, который вы хотите выровнять.
На вкладке Главная в разделе Параграф , выполните одно из следующих действий:
— | Нажмите |
|---|---|
Выровнять текст по левому краю | Выровнять текст по левому краю |
Центральный текст | Текст по центру |
Выровнять текст по правому краю | Выровнять текст по правому краю |
Текст по ширине
При выравнивании текста между словами добавляется пробел, чтобы оба края каждой строки были выровнены по обоим полям.
Последняя строка абзаца выравнивается по левому краю.
Щелкните в любом месте абзаца, который вы хотите выровнять.
На вкладке Главная в разделе Абзац нажмите Выровнять текст по ширине .
Распространить текст
При распределении текста между символами добавляется пробел, чтобы оба края каждой строки были выровнены с обоими полями. Последняя строка в абзаце также распределяется.
