Как изменить положение текста в html

Как изменить расположение текста в input

надо сделать так чтоб в input текст сразу начинал вводиться вверху а не по середине, спасибо

html

css .sub_contacts_message

Отслеживать
задан 24 ноя 2019 в 14:18
user360868 user360868
Никак, думается — поменяйте input на textarea, например.
24 ноя 2019 в 14:40

1 ответ 1

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

можно, конечно и через input сделать, но придется JS подключать, самый просто вариант:

* < margin: 0; padding: 0; box-sizing: border-box; >.form-group textarea

Отслеживать
ответ дан 24 ноя 2019 в 14:46
7,404 2 2 золотых знака 11 11 серебряных знаков 25 25 бронзовых знаков

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Текст

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

На этой странице

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

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

Текст с выравниванием по левому краю для всех размеров области просмотра.

Выровненный по центру текст на всех размерах области просмотра.

Текст с выравниванием по правому краю для всех размеров области просмотра.

Выровненный по левому краю текст на размерных области просмотра SM (маленький) или шире.

Выровненный по левому краю текст на размерных области просмотра MD (средний) или шире.

Выровненный по левому краю текст на размерных области просмотра LG (большой) или шире.

Выровненный по левому краю текст на размерных области просмотра XL (очень большой) или шире.

p class="text-start">Текст с выравниванием по левому краю для всех размеров области просмотра.p> p class="text-center">Выровненный по центру текст на всех размерах области просмотра.p> p class="text-end">Текст с выравниванием по правому краю для всех размеров области просмотра.p> p class="text-sm-start">Выровненный по левому краю текст на размерных области просмотра SM (маленький) или шире.p> p class="text-md-start">Выровненный по левому краю текст на размерных области просмотра MD (средний) или шире.p> p class="text-lg-start">Выровненный по левому краю текст на размерных области просмотра LG (большой) или шире.p> p class="text-xl-start">Выровненный по левому краю текст на размерных области просмотра XL (очень большой) или шире.p>

Обратите внимание, что мы не предоставляем служебные классы для выравнивания текста по всей ширине. Хотя эстетически выровненный по ширине текст может выглядеть более привлекательно, он делает интервалы между словами более случайными и, следовательно, труднее читать.

Перенос текста и переполнение

Оберните текст классом .text-wrap .

Этот текст следует обернуть.

div class="badge bg-primary text-wrap" style="width: 6rem;"> Этот текст следует обернуть. div>

Запретить перенос текста с помощью класса .text-nowrap .

Этот текст должен переполнять родительский.

div class="text-nowrap bd-highlight" style="width: 8rem;"> Этот текст должен переполнять родительский. div>

Разрыв слов

Запретите длинным строкам текста нарушать компоновку ваших компонентов, используя .text-break для установки word-wrap: break-word и word-break: break-word . Мы используем word-wrap вместо более распространенного overflow-wrap через переполнение для более широкой поддержки браузеров и добавляем устаревшее word-break: break-word , чтобы избежать проблем с гибкими контейнерами.

p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmp>

Обратите внимание, что разрыв слов на арабском языке невозможен, который является наиболее часто используемым языком RTL. Поэтому .text-break удаляется из нашего RTL-скомпилированного CSS.

Трансформация текста

Трансформируйте текст в компонентах с помощью классов заглавных букв.

Текст в нижнем регистре.

Текст в верхнем регистре.

p class="text-lowercase">Текст в нижнем регистре.p> p class="text-uppercase">Текст в верхнем регистре.p> p class="text-capitalize">Заглавный текст.p>

Обратите внимание, как .text-capitalize изменяет только первую букву каждого слова, не затрагивая регистр любых других букв.

Размер шрифта

Быстро изменить размер шрифта текста font-size . В то время как наши классы заголовков (например, .h1 – .h6 ) применяют font-size , font-weight и line-height , эти утилиты применяют только font-size . Размер этих утилит соответствует элементам заголовка HTML, поэтому по мере увеличения числа их размер уменьшается.

p class="fs-1">.fs-1 textp> p class="fs-2">.fs-2 textp> p class="fs-3">.fs-3 textp> p class="fs-4">.fs-4 textp> p class="fs-5">.fs-5 textp> p class="fs-6">.fs-6 textp>

Настройте свой доступный font-size , изменив карту Sass $font-sizes .

Толщина текста и курсив

Изменяйте толщину (жирность) или выделите текст курсивом.

Жирный текст (относительно родительского элемента).

Нормальная толщина текста.

Легкий текст (относительно родительского элемента).

Текст без стиля шрифта

p class="fw-bold">Жирный текст.p> p class="fw-bolder">Жирный текст (относительно родительского элемента).p> p class="fw-normal">Нормальная толщина текста.p> p class="fw-light">Light weight text.p> p class="fw-lighter">Легкий текст (относительно родительского элемента).p> p class="fst-italic">Курсивный текст.p> p class="fst-normal">Текст без стиля шрифтаp>

Высота строки

Измените высоту строки с помощью утилит .lh-* .

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.

p class="lh-1">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.p> p class="lh-sm">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.p> p class="lh-base">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.p> p class="lh-lg">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.p>

Моноширинный текст (ширина каждого символа одинакова)

Измените выделение на наш моноширинный стек с помощью .text-monospace .

Это моноширинный текст

p class="font-monospace">Это моноширинный текстp>

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

Текст может быть выровнен по одному или по обоим краям (отступам) текстового фрейма. Текст считается выключенным, если он выровнен с обеих сторон. Можно выбрать выравнивание всего текста в абзаце, кроме последней строки («Выключка по левому краю» или «Выключка по правому краю»), либо включая ее («Выключка по формату»). Если последняя строка содержит всего несколько символов, то, возможно, нужно будет применить специальный символ конца материала и создать концевую шпацию.

Примечание.

При выключке текста при помощи компоновщика абзацев Adobe, чтобы обеспечить одинаковую плотность текста в абзаце и его визуальную привлекательность, InDesign производит смещение текста. Можно произвести точную подстройку интервалов в выключенном тексте.

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

Выделите текст.

На палитре «Абзац» или на панели «Управление» нажмите одну из кнопок в области «Выравнивание»: «Влево», «По центру», «Вправо», «Выключка влево», «Выключка по центру», «Выключка вправо» или «Выключка по формату».

(Необязательно) Нажмите «Выключка к корешку» или «Выключка от корешка».

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

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

Примечание.

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

Выравнивание абзацев по сетке из базовых линий

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

Сетка из базовых линий представляет интерлиньяж основного текста документа. Это значение может быть кратно изменено для всех элементов страницы, чтобы гарантировать, что текст всегда будет выровнен по столбцам и страницам. Например, если основной текст в документе имеет интерлиньяж 12 пунктов, то для текста заголовка можно задать интерлиньяж в 18 пунктов и добавить отступ 6 пунктов перед абзацами, которые находятся перед заголовком.

A. Text aligned to the embox center B. Text aligned to the embox top C. Text aligned to the ICF

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

Примечание.

Если размер текста соответствует настройкам сетки фрейма по умолчанию, расположение текста останется прежним даже при изменении выравнивания по сетке. Когда шрифт или размер текста в сетке фрейма отличается от настроек фрейма по умолчанию, изменение выравнивания по сетке влияет на расположение текста.

Параметры сетки из базовых линий изменяются в разделе «Сетка и направляющие» диалогового окна «Установки».

Для просмотра сетки из базовых линий выберите меню «Вид» > «Сетка и направляющие» > «Показать базовую сетку». Сетки из базовых линий отображаются в том же направлении, что и направление письма для текстового фрейма.

Примечание.

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

Выравнивание абзацев по сетке из базовых линий

Выделите текст.
В меню палитры «Абзац» выберите «Выравнивание по сетке» > «Базовая линия латиницы».

Выравнивание только по сетке из базовых линий первой строки

Выделите абзац, который нужно выровнять.
В меню палитры «Абзац» или панели «Управление» выберите «Выровнять по сетке только первую строку».

На палитре «Абзац» или на панели «Управление» нажмите «Выровнять по сетке из базовых линий» .

В меню палитры «Абзац» или панели «Управление» выберите «Выравнивание по сетке», затем любой параметр, кроме «Нет».

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

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

Выравнивание абзацев по сетке из базовых линий

Сетка из базовых линий представляет интерлиньяж основного текста документа. Это значение может быть кратно изменено для всех элементов страницы, чтобы гарантировать, что текст всегда будет выровнен по столбцам и страницам. Например, если основной текст в документе имеет интерлиньяж 12 пунктов, то для текста заголовка можно задать интерлиньяж в 18 пунктов и добавить отступ 6 пунктов перед абзацами, которые находятся перед заголовком.

Использование сетки из базовых линий гарантирует единообразие размещения текстовых элементов на странице. Она позволяет настроить интерлиньяж абзаца таким образом, чтобы его базовая линия была гарантированно выровнена по основной сетке страницы. Этот метод можно использовать в том случае, если базовые линии текста находятся в нескольких столбцах, а также при выравнивании смежных текстовых фреймов. Параметры сетки из базовых линий изменяются в разделе «Сетка и направляющие» диалогового окна «Установки».

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

Для просмотра сетки из базовых линий выберите меню «Вид» > «Сетка и направляющие» > «Показать базовую сетку».

Примечание.

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

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

Часть содержимого этого раздела может быть неприменима к некоторым языкам.

Выравнивание текста — это атрибут форматирование абзацев, который определяет внешний вид текста во всем абзаце. Например, в абзаце с выравниванием по левому краю (наиболее распространенное выравнивание), текст выравнивается по левому полю. В абзаце, который выровнен по обоим полям, текст выравнивается по обоим полям.

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

текст по центру

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

текст по у цель

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

1. Щелкните любое место абзаца, который необходимо выровнять.
2. На вкладке Главная в группе Абзац сделайте следующее:

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

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

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

Центр текста

Выровнять текст по правому краю

Выровнять текст по правому

Выровнять по ширине

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

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

Важно: Microsoft Office для Mac 2011 больше не поддерживается. Перейдите на Microsoft 365, чтобы работать удаленно с любого устройства и продолжать получать поддержку.

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

1. Щелкните любое место абзаца, который необходимо выровнять.
2. На вкладке Главная в Абзац выполните одно из перечисленных ниже действий.

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

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

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

Центр текста

Выровнять текст по правому краю

Выровнять текст по правому

Выровнять по ширине

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

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

Распределить текст

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

1. Щелкните любое место абзаца, текст в котором необходимо распределить.
2. На вкладке Главная в области Абзацнажмите кнопку Распределенный .