Объяснение того, что такое предварительно отформатированный текст в HTML

Когда вы добавляете текст в HTML-код для веб-страницы, например, в элемент абзаца, у вас практически нет контроля над тем, где будут разрываться эти строки текста или какой интервал будет использоваться. Это связано с тем, что веб-браузер будет перемещать текст по мере необходимости в зависимости от области, которая его содержит. Это включает в себя отзывчивые веб-сайты который будет иметь очень плавный макет, который меняется в зависимости от размер экрана используется для просмотра страницы. Текст HTML разорвет строку там, где это необходимо, как только достигнет конца своей области. В конце концов, браузер играет большую роль в определении того, как текст ломается, чем вы.

Что касается добавления интервала для создания определенного формата или макета, HTML не распознает интервалы, добавляемые к коду, включая пробел, табуляцию или возврат каретки. Если вы поместите двадцать пробелов между одним словом и словом, которое идет после него, браузер отобразит там только один пробел. Это называется коллапсом пробелов, и на самом деле это одна из концепций HTML, с которой поначалу борются многие новички в отрасли. Они ожидают, что пробелы HTML будут работать так же, как в таких программах, как Microsoft Word, но пробелы HTML работают совсем не так.

В большинстве случаев нормальная обработка текста в любом документе HTML - это именно то, что вам нужно, но в других экземпляров, вам может потребоваться больше контроля над тем, как именно текст выходит и где он разрывается. линий. Это называется предварительно отформатированным текстом (другими словами, вы определяете формат). Вы можете добавить предварительно отформатированный текст на свои веб-страницы с помощью HTML.

 С помощью 
 Тег 

Много лет назад было обычным делом видеть веб-страницы с блоками предварительно отформатированного текста. С помощью 
 Тег для определения разделов страницы, отформатированных самим набором текста, был для веб-дизайнеров быстрым и простым способом заставить текст отображать так, как они хотели. Это было до появления CSS для верстки, когда веб-дизайнеры действительно застряли, пытаясь заставить разметку использовать таблицы и другие методы только для HTML. Это (вроде как) сработало, потому что предварительно отформатированный текст определяется как текст, структура которого определяется типографскими соглашениями, а не рендерингом HTML. 

Сегодня этот тег используется не так часто, потому что CSS позволяет нам диктовать визуальные стили гораздо более эффективно, чем попытки чтобы заставить внешний вид нашего HTML и потому что веб-стандарты диктуют четкое разделение структуры (HTML) и стилей (CSS). Тем не менее, могут быть случаи, когда предварительно отформатированный текст имеет смысл, например, для почтового адреса, где вы хотите принудительно разрывы строк или примеры стихов, где разрывы строк важны для чтения и общего потока содержание. 

Вот один из способов использования HTML 
 тег: 

В типичном HTML-коде пустое пространство в документе сворачивается. Это означает, что символы возврата каретки, пробелы и табуляции, используемые в этом тексте, будут свернуты в один пробел. Если вы введете приведенную выше цитату в типичный HTML-тег, такой как тег p (абзац), вы получите одну строку текста, например: 

Twas brillig и скользкие toves Делали круговорот и играли в wabe. 

Тег pre оставляет символы пробела как есть. Таким образом, разрывы строк, пробелы и табуляции сохраняются при отображении этого содержимого браузером. Помещая цитату внутри 
 тег для того же текста приведет к такому отображению: 
Twas brillig и скользкие toves
Сделал круговорот и ловушку
в
в
Wabe
 Что касается шрифтов 

В 
 тег делает больше, чем просто поддерживает пробелы и разрывы для текста, который вы пишете. В большинстве браузеров он написан моноширинным шрифтом. Это делает символы в тексте одинаковыми по ширине. Другими словами, буква i занимает столько же места, сколько буква w. 

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

Следует помнить, что в HTML5 атрибут width больше не поддерживается для 
 элемент. В HTML 4.01 ширина определяла количество символов, которое будет содержать строка, но это было опущено для HTML5 и последующих версий.