Символ переноса строки в excel. как сделать перенос строки в ячейке excel
Содержание:
Урок 5Перенос строки HTML
Содержание урока
Практикум
Практикум
В ходе создания HTML-документа может возникнуть необходимость переноса строки внутри абзаца: например, при размещении отрывка из стихотворения каждая фраза должна начинаться с новой строки.
Обратите внимание, что вы не сможете изменить вид отображения текста на странице с помощью добавления в код дополнительных пробелов или переносов строки. Любое количество пробелов и переносов строк будет считаться как один пробел, так как браузер будет автоматически удалять все лишние пробелы и переносы строк.
В таких случаях самым лучшим выходом из ситуации будет использование тега (вставляет перенос строки)
Он является одним из пустых элементов, у которых нет содержимого. Пустые теги, такие как br, изначально не имеют никакого содержимого, поэтому для их использования было придумано краткое описание для представления элемента, то есть в то место, где нужно добавить разрыв строки, просто подставляется тег . Краткое описание подразумевает то, что этот тег не имеет закрывающего тега. Если не было бы краткого описания, пришлось бы каждый раз для обозначения разрыва строки писать , а разве это было бы удобнее?!
В таких случаях самым лучшим выходом из ситуации будет использование тега <br> (вставляет перенос строки). Он является одним из пустых элементов, у которых нет содержимого. Пустые теги, такие как br, изначально не имеют никакого содержимого, поэтому для их использования было придумано краткое описание для представления элемента, то есть в то место, где нужно добавить разрыв строки, просто подставляется тег <br>. Краткое описание подразумевает то, что этот тег не имеет закрывающего тега. Если не было бы краткого описания, пришлось бы каждый раз для обозначения разрыва строки писать <br></br>, а разве это было бы удобнее?!
Примите во внимание, что краткое описание придумано и используется не из-за лени, а для повышения эффективности, за счет более легкого чтения кода. И в самом деле, спустя некоторое время, проведенное за чтением HTML-кода, вы увидите, что такие элементы легче воспринимаются и запоминаются.
Для переноса текста на несколько строк тег ставится соответствующее количество раз.
Для переноса текста на несколько строк тег <br> ставится соответствующее количество раз.
Тег <br>
Тег <br> указывает место переноса строки в тексте HTML страницы. Тег br ставится перед местом конца строки, текст после тега будет выведен с новой строки.
Стоит отметить, что тег <br> устанавливает границу между строками (означает разрыв строки), а не делит текст на абзацы. Чтобы определить абзацы в тексте HTML документа используйте тег <p>.
Отображение в браузере
В примере далее использован разрыв строк <br>:
Текст первой строки.Текст второй строки.
Для сравнения, разделение текста на абзацы <p>:
Текст первого абзаца.
Текст второго абзаца.
Пример использования <br> в HTML коде
<html> <body> <p>Это первая строка обычного текста на веб-странице. В конце перенос строки<br> И вот уже вторая строка текста.</p> </body></html>
Тег <p>
Тег <p> в HTML определяет абзац. Браузеры автоматически добавляют отступы сверху и снизу от тега (обычно в размере 1em), но вы всегда можете поменять стили тега p с помощью каскадных таблиц стилей CSS. Внутри тегов абзаца <p> может быть как простой текст, так и вложенные теги, например, ссылки <a>, строчные элементы <span>, теги выделения текста <strong>, <em> и другие.
Отображение в браузере
Это текст первого абзаца со ссылкой на справочник тегов HTML внутри.
Это текст второго абзаца с выделенным словом внутри.
Пример использования <p> в HTML коде
<html> <body> <p>Это текст первого абзаца со ссылкой на <a href="/html">справочник тегов HTML</a> внутри.</p> <p>Это текст <span style="color: green;">второго</span> абзаца с выделенным словом внутри.</p> </body></html>
Следующая страница Перенос строки HTML
Свойства
В конце концов при решении проблем с переносом текста остается некий типичный «список подозреваемых». Одни довольно очевидные и логичные, а другие — нет. Одни делают свое дело сами по себе, а другие не очень.
Итак, давайте взглянем.
Свойство принимает в виде значений два ключевых слова: (по умолчанию) и . Это в дополнение к трём глобальным значениям , и .
По умолчанию слишком длинное слово не разрывается. Браузер не влияет на такое слово, что выглядит замечательно, пока мы не сталкиваемся с мобильными. Хотя размер контейнера может подстраиваться под слово, оно в итоге вывалится из его границ и приведёт к страшной горизонтальной прокрутке на всей странице.
В первом примере этого демо можно наглядно увидеть поведение по умолчанию:
Второй пример на этом демо включает объявление , приказывающее браузеру разбить слово перед возможным переполнением своего контейнера.
Важно заметить: было заменено на , но значения остались прежними. И взгляните. Насколько я поняла, свойство нужно только для того, чтобы как-то по-особому форматировать текст на китайском, японском и корейском языках
Насколько я поняла, свойство нужно только для того, чтобы как-то по-особому форматировать текст на китайском, японском и корейском языках.
Я применяла для разбивки длинных слов, но правильным свойством (если вы не работаете с дальневосточным текстом) будет более общее вышеупомянутое .
hyphens
Свойство hyphens рассказывает браузеру, как расставлять дефис при переносе, и допускает следующие значения: , и , которые в настоящий момент , поэтому вам, видимо, придётся запустить FireFox.
Значение гарантирует, что в слова никогда не будет подставляться символ переноса.
При значении дефис выставляется в месте переноса только при наличии указывающего на это символа. Указать это можно, вставив символ либо жёсткого, либо мягкого переноса в нужное место в разметке.
Жёсткий перенос () прикажет слову разорваться в определённом месте при необходимости, но всё в любом случае будет отображаться на экране.
Мягкий перенос () делает тоже самое, но фактически не отображает дефис на экране, что, как правило, предпочтительнее.
При значении слова можно разбивать либо в явно указанных местах, либо автоматически, в соответствии с правилами расстановки переносов для конкретного языка, указанными в специальных файлах (если они предусмотрены в браузере). Расстановка переносов специфична для языка, и для документа нужно определять атрибут .
white-space
У каждого из нас есть любимые CSS-свойства, на которые можно положиться, словно на запасной выход с надписью «При аварии разбить стекло молотком», чтобы выбраться из запутанной ситуации; см. также и . Для меня таким свойством является .
Это свойство указывает правила обработки пробельных символов (пробелы, табы, переводы строки) в элементе. Что порой может вдруг оказаться невероятно полезным, например, при отладке, или чтобы лучше контролировать содержимое ячеек таблицы.
У этого свойства бывает пять значений: (по умолчанию), , , и .
Взглянуть на эти свойства в действии можно в примере ниже: учитывайте добавочные пробельные символы в разметке.
По умолчанию пробельные символы схлопываются в один пробел и строки разбиваются, чтобы уместиться в контейнер; как видно в первом демо-примере, в тексте есть лишние пробелы, но они не отображаются.
(пример 2) также игнорирует дополнительные пробелы, но зато не разбивает строку текста на границах контейнера.
учитывает все пробельные символы в разметке, и не разбивает строки (как видно выше в примере 3).
(пример 4) учитывает добавочные пробелы, но заставляет строку разбиваться.
(последний пятый пример) схлопывает пробельные символы (кроме перевода строки) и принуждает «цепочку» текста умещаться в контейнер.
На CSS—Tricks есть удобная табличка, которая поможет всё это резюмировать.
Как удалить переносы строк из ячеек в Excel 2013, 2010 и 2007
Существует 3 метода, позволяющих реализовать удаление возврата каретки из полей. Некоторые из них реализуют замещение знаков переноса строчки. Рассмотренные ниже варианты одинаково работают в большинстве версий табличного редактора.
1
Перенос строчки в текстовой информации возникает по самым разнообразным причинам. К частым причинам относятся такие моменты, как использование сочетания клавиш «Alt+Enter», а также перенос текстовых данных из интернет-странички в рабочую область табличной программы. Нам необходимо произвести удаление возврата каретки, так как без этой процедуры невозможно реализовать нормальный поиск точных фраз.
Удаляем возвраты каретки вручную
Разберем детально первый метод.
- Преимущество: быстрота выполнения.
- Недостаток: отсутствие дополнительных функций.
Подробная инструкция выглядит так:
- Производим выделение всех ячеек, в которых необходимо реализовать данную операцию или же осуществить замену знаков.
2
- При помощи клавиатуры жмем комбинацию кнопок «Ctrl+H». На экране возникло окошко, имеющее наименование «Найти и заменить».
- Выставляем указатель в строчку «Найти». При помощи клавиатуры жмем комбинацию кнопок «Ctrl+J». В строчке появилась небольшая точка.
- В строчку «Заменить на» вводим какое-нибудь значение, которое вставится вместо возвратов каретки. Чаще всего применяют пробел, так как он позволяет исключить склеивание 2-х соседствующих фраз. Для реализации удаления переноса строчек необходимо строчку «Заменить на» не заполнять какой-либо информацией.
3
- При помощи ЛКМ щелкаем на «Заменить все». Готово! Мы реализовали удаление возврата каретки.
4
Удаляем переносы строк при помощи формул Excel
- Преимущество: возможность применения разнообразных формул, осуществляющих сложнейшую проверку текстовой информации в выбранном поле. К примеру, можно реализовать удаление возвратов каретки, а потом отыскать ненужные пробелы.
- Недостаток: необходимо создание дополнительной колонки, а также выполнение большого количества манипуляций.
Подробная инструкция выглядит так:
- Реализуем добавление дополнительной колонки в конце исходной информации. В рассматриваемом примере она получит наименование «1 line»
- В 1-е поле дополнительной колонки (С2) вбиваем формулу, реализующую удаление или замену переносов строчек. Для осуществления этой операции применяется несколько формул. Формула, подходящая для применения с сочетаниями возврата каретки и переноса строчки, выглядит так: =ПОДСТАВИТЬ(ПОДСТАВИТЬ(В2;СИМВОЛ(13);””);СИМВОЛ(10);””).
- Формула, подходящая для осуществления замены переноса строчки каким-либо знаком, выглядит так: =СЖПРОБЕЛЫ(ПОДСТАВИТЬ(ПОДСТАВИТЬ(В2;СИМВОЛ(13);””);СИМВОЛ(10);”, “). Стоит заметить, что в этом случае не произойдет объединение строчек.
- Формула, позволяющая произвести удаление всех непечатаемых знаков из текстовых данных, выглядит так: =ПЕЧСИМВ(B2).
5
- Производим копирование формулы, а затем вставляем ее в каждую ячейку дополнительной колонки.
- Дополнительно можно осуществить замену первоначальной колонки новой, в которой будут удалены переносы строчек.
- Производим выделение всех ячеек, располагающихся в колонке С. Зажимаем комбинацию «Ctrl+C» на клавиатуре, чтобы реализовать копирование информации.
- Производим выбор поля В2. Зажимаем комбинацию кнопок «Shift+F10». В возникшем небольшом перечне жмем ЛКМ на элемент, имеющий наименование «Вставить».
- Реализуем удаление вспомогательной колонки.
Удаляем переносы строк при помощи макроса VBA
- Преимущество: создание происходит только 1 раз. В дальнейшем этот макрос можно применять и в остальных табличных документах.
- Недостаток: необходимо понимание работы языка программирования VBA.
Для реализации этого метода нужно попасть в окошко для ввода макросов и ввести туда такой код:
6
Перенос слов в тексте при помощи свойства hyphens
Данное CSS свойства сравнительно новое и не очень хорошо поддерживается более старыми версиями браузеров. Однако, несмотря на это, оно наилучшим образом осуществляет перенос слов и текста, так как основывается на встроенном словаре браузера и автоматически проставляет знак «-» в конце строки.
СSS код блока с текстом в этом случае выглядит так:
CSS
.perenos-hyphens {
-moz-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
}
|
1 |
.perenos-hyphens { -moz-hyphensauto; -webkit-hyphensauto; -ms-hyphensauto; } |
Вот результат его использования данного CSS свойства:
Здесь ну очень длинненькое слово, которое не плохо было бы перенести на новую строку при помощи CSS.
Если на вашем сайте данное CSS свойство не срабатывает, то допишите для тега html атрибут lang=”ru”
В коде это будет выглядеть так:
XHTML
<html lang=»ru»>
| 1 | <html lang=»ru»> |
Как видите перенос текста можно осуществлять несколькими способами как средствами CSS так и HTML.
Отправить статью
17 комментариев к записи
Интересное и главное простое решение, надо запомнить, возможно пригодится в работе.
Юрий, спасибо! Очень ценная информация. Но как понять для какого браузера выбрать нужный код?
Елена, вот список префиксов, которые работают с этим свойством в разных браузерах:
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 применяет какой-то общий алгоритм переноса для всех языков?
Надо для меню задать правило — переносим на новую строку все слова кроме первого.
2. Когда не помещаются
Виноват. Не для меню, а для названия модуля.
Ребят, на самом деле, если у вас не работают переносы, дело тут не в ширине окна браузера. Словарь переносов хранится в браузере и подключается только при наличии атрибута lang с кодом языка. Так, для русского языка следует добавить lang=»ru» к элементу или непосредственно к абзацу текста.
Переносы не работают в Chrome и Opera.
Единственное кросс-браузерное решение — это вставить мягкие переносы (мнемокод «») в места, где вы допускаете вставлять дефис и разбивать слово с последующим переносом в случае возможности (если ширина позволяет). Можно воспользоваться сервисом автоматической расстановки мягких переносов , вставляете, например, там текст «расставить переносы правильно» и получаете готовый html — «расставить переносы правильно» его вставляете у себя на сайте. Всё будет переноситься предсказуемо и кросс-браузерно.
Можете в сервисе ограничить длину слова в которых необходимо расставить мягкие переносы, если хотите разбивать только длинные слова. Потом можно это текст опять редактировать, просто вставив на том же сервисе туда, где его скопировали и т.д.
Источник
Переносы в тексте
HTML произвольно переносит текст на новую строку в тех местах, где встречается пробел или дефис. Но по правилам русского языка в некоторых случаях переносы запрещены. Так, нельзя разрывать переносом сокращения, вроде «т. д.», отрывать инициалы от фамилии, от значения единицы измерения (5 км) и обозначение года (1917 г.) и др. Чтобы запретить перенос в определённых местах вместо пробела применяется неразрывный пробел , как показано в примере 8.
Пример 8. Неразрывный пробел
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Пробел</title>
</head>
<body>
<p>Возврат к стереотипам аннигилирует глубокий
полифонический роман, именно об этом говорил
Б. В. Томашевский в своей работе
1925 года.</p>
</body>
</html>
И, наоборот, там, где в длинных словах желательно поставить перенос строки, вы можете использовать элемент <wbr> или спецсимвол ­. И тот и другой вариант работает одинаково — слово отображается целиком, когда оно помещается в строке, а если не помещается, то в указанных местах делается перенос (пример 9). Есть только небольшая разница в отображении — ­ добавляет при переносе дефис, а <wbr> нет.
Пример 9. Переносы в тексте
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Переносы</title>
</head>
<body>
<p>Название орудия — сорока­пяти­миллиметровая
противотанковая пушка образца 1942 года (М-42).</p>
</body>
</html>
Зачем переносить «непереносимое»
В большинстве случаев при отображении текстового содержимого веб-страниц в браузере перенос слов не применяется. Если слово не вмещается целиком в область экрана, то по умолчанию оно полностью « переезжает » на следующую строчку.
Частичный перенос применяется лишь к длинным и сложным словам, состоящим из нескольких терминов и разделенных дефисом. Вот тут и возникают проблемы отображения этих слов на разных по диагонали экранах и в разных браузерах. При этом точно предугадать, как длинное слово будет « выглядеть » на клиентской стороне трудно, поэтому задавать переносы « вручную » бессмысленно:
Решаем проблему переноса слов с помощью HTML
Перед тем, как рассмотреть перенос длинных слов в CSS , изучим возможности решения этой проблемы с помощью языка гипертекста. Для этого в HTML имеется несколько вариантов:
Использование символа мягкого разрыва — позволяет задать место разрыва сложного слова. При изменении размеров окна браузера на следующую строку переносится только часть длинного слова, стоящая после ­ , а после первой половины выводится знак переноса, похожий на дефис:
Использование тега — элемент появился в HTML 5 . Он также служит для указания браузеру места для разрыва сложного или длинного слова. Но в отличие от предыдущего спецсимвола этот тег не выводит в месте « разлома » знак переноса, что может негативно сказаться на читаемости всего текста:
Перенос слов средствами CSS
Перед тем, как запретить перенос слов в CSS , давайте рассмотрим несколько свойств, способных разрешить основную проблему:
- word-wrap – описывает, как производить перенос слов, которые по длине не помещаются в установленные размеры контейнера. Сразу стоит предупредить, что с валидацией этого свойства возникают проблемы, и с реализацией его поддержки в CSS консорциум W3C еще не определился. Поэтому специализированные валидаторы при наличии word-wrap в коде будут выдавать ошибку:
Тем не менее, это свойство «воспринимается» всеми современными браузерами и является эффективным решением проблемы переноса длинных слов. word-wrap принимает следующие значения:
- normal – слова не переносятся;
- break-word – автоматический перенос слов;
- inherit – наследование значения родителя.
Пример, иллюстрирующий применение этого свойства:
В новой спецификации CSS свойство word-wrap было переименовано в overflow-wrap . Оба свойства принимают одинаковые значения. Но поддержка overflow-wrap пока реализована слабо, поэтому лучше использовать старую версию свойства:
Как видно на расположенном выше скриншоте, новое свойство поддерживается Google Chrome , но не поддерживается в IE . Поэтому overflow-wrap лучше не использовать для переноса слов в CSS .
- word-break – устанавливает правила переноса строк внутри контейнера, если они не помещаются в него по ширине. Это новое свойство, и его поддержка была реализована в CSS3 . Оно является валидным, но предназначено для работы со строками, поэтому перенос слов может производиться грамматически неправильно.
Свойство принимает три значения:
- normal – используются правила переноса, установленные по умолчанию;
- word-break – перенос строк осуществляется автоматически, чтобы слово поместилось в установленные по ширине размеры контейнера;
- keep-all – отключает автоматический перенос слов в китайском, японском и корейском. Для остальных языков действие значения аналогично normal.
- hyphens – новое свойство, которое появилось с выходом CSS3 . Оно устанавливает, как браузер будет осуществлять перенос слов в выводимом тексте. Свойство принимает несколько значений:
- none – отключает перенос слов в CSS ;
- manual ( значение по умолчанию ) – слова переносятся в тех участках текстового блока, где это задано с помощью тега или мягкого переноса () ;
- auto – браузер автоматически переносит слова на основе своих настроек.
должен присутствовать атрибут lang со значением «ru» (lang=»ru»).
Свойство поддерживается последними версиями IE , Opera и Firefox . Для каждого из них прописывается своя строчка CSS . Hyphens не поддерживается Google Chrome . Пример:
Запрет переноса слов
Иногда нужно сделать так, чтобы строка отображалась полностью без разрыва. Запрет переноса слов в css можно реализовать несколькими способами:
- С помощью неразрывного пробела   , который устанавливается в местах переноса строки или слов;
- Задав свойству white-space значение « nowrap » ( white-space: nowrap ).
Теперь вы сможете переносить с помощью CSS даже самые длинные слова. Но вот с проблемой труднопереносимых людей вам придется разбираться самостоятельно. Попробуйте воздействовать на них методами CSS – может и получиться, хотя мы сами не проверяли.
Абзацы
Как правило, блоки текста разделяют между собой абзацами. По умолчанию между абзацами существует небольшой вертикальный отступ, называемый отбивкой. Синтаксис создания абзацев следующий.
Каждый абзац начинается с открывающего тега <p> и заканчивается закрывающим тегом </p>. В примере 2 показано применение нескольких абзацев.
Пример 2. Использование абзацев
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Абзацы</title>
</head>
<body>
<p>В одних садах цветёт миндаль, в других метёт метель.</p>
<p>В одних краях ещё февраль, в других — уже апрель.</p>
<p>Проходит время, вечный счёт: год за год, век за век…</p>
<p>Во всём — его неспешный ход, его кромешный бег.</p>
<p>В году на радость и печаль по двадцать пять недель.</p>
<p>Мне двадцать пять недель февраль, и двадцать пять — апрель.</p>
<p>По двадцать пять недель в туман уходит счёт векам.</p>
<p>Летит мой звонкий балаган куда-то к облакам.</p>
<p>М. Щербаков</p>
</body>
</html>
Результат данного примера показан на рис. 2.
Рис. 2. Абзацы текста
Как видно из приведённого рисунка, при использовании элемента <p> между абзацами возникают отступы. От них можно избавиться, если в местах переноса строк добавить элемент <br>. В отличие от абзаца, <br> не создаёт дополнительных вертикальных отступов между строк и может применяться практически в любом тексте.
Так, текст примера 1 с учётом переноса строк будет преобразован следующим образом (пример 3).
Пример 3. Использование <br>
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Переносы в тексте</title>
</head>
<body>
<p>В одних садах цветёт миндаль, в других метёт метель.<br>
В одних краях ещё февраль, в других — уже апрель.<br>
Проходит время, вечный счёт: год за год, век за век…<br>
Во всём — его неспешный ход, его кромешный бег.<br>
В году на радость и печаль по двадцать пять недель.<br>
Мне двадцать пять недель февраль, и двадцать пять — апрель.<br>
По двадцать пять недель в туман уходит счёт векам.<br>
Летит мой звонкий балаган куда-то к облакам.</p>
<p>М. Щербаков</p>
</body>
</html>
Результат примера продемонстрирован на рис. 3. Видно, что расстояние между строками текста уменьшилось и текст приобрёл более компактный вид.
Рис. 3. Вид текста с учётом переносов
Учтите, что один абзац нельзя вкладывать внутрь другого.
Разбитие текста в HTML на абзацы через тег
Как вы уже поняли из заголовка, в HTML (да и не только) существует такое понятие, как абзацы (параграфы). Для них отведен специальный тег типа:
Весь текст, заключенный в него, переносится на новую строку. По умолчанию (если нет глобальных стилей) он имеет свой отступ. Использование следующее:
Здесь стоит отметить то, что использование пустого тега типа:
не даст вам дополнительной пустой строки, как это можно сделать в первом варианте. При этом, если немного схитрить и поместить в пустой тег код пробела, это все же даст дополнительную пустую строку:
Для того чтобы задать желаемый отступ между абзацами, воспользуйтесь глобальными стилями:
Или же присвойте абзацу свой идентификатор, за счет которого примените свой персональный стиль:
Помимо этого, тег <p> имеет поддержку атрибута «align», с помощью которого можно задать выравнивание текста.
Допустимые значения:
left – выравнивание по левому краю (значение по умолчанию).
center – выравнивание по центру.
right – выравнивание по правому краю.
justify – выравнивание по ширине (по левому и правому краю одновременно). В этом случае, между словами добавляются пробелы.
Этот вариант оформления текстов я люблю больше всего, так как можно настроить желаемое расстояние между абзацами. Тег из первого же варианта (<br />) я использую редко.
Верхний и нижний индексы
Индексом по отношению к тексту называется смещение символов относительно базовой линии вверх или вниз (рис. 5). В зависимости от положения, индекс называется, соответственно, верхним или нижним. Они активно применяются в математике, физике, химии и для обозначения единиц измерения. HTML предлагает два элемента для создания индекса: <sup> — верхний индекс (от англ. superscript) и <sub> — индекс нижний (от англ. subscript). Текст внутри этих элементов обозначается меньшим размером, чем обычный текст, и смещается вверх или вниз.
Рис. 5. Базовая линия текста
В примере 5 показано применение нижнего индекса для химической формулы.
Пример 5. Использование нижнего индекса
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Нижний индекс</title>
</head>
<body>
<p>Формула серной кислоты: H<sub>2</sub>SO<sub>4</sub></p>
</body>
</html>
Результат данного примера показан на рис. 6.
Рис. 6. Использование элемента <sub>
В примере 6 показано применение верхнего индекса для математической формулы.
Пример 6. Использование верхнего индекса
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Верхний индекс</title>
</head>
<body>
<p>ax<sup>2</sup> + bx + c</p>
</body>
</html>
Результат данного примера показан на рис. 7.
Рис. 7. Использование элемента <sup>
