Как поставить тег пробела в html? Раскрываю три способа, о которых вы не знали

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

Из статьи вы узнаете, какой существует тег пробела в html, как эту проблему решает css, а также познакомитесь с так называемыми специальными символами. Конечно же я приведу примеры программного кода для каждого ключевого теоретического материала. Ну что ж, приступим!

HTML спешит на помощь!

Большинство тегов языка разметки автоматически удаляют лишние пробелы между словами, оставляя только один. Это очень удобно. Однако иногда возникают такие ситуации, когда просто необходимо сохранить все символы табуляции и отобразить их на веб-странице. Для этого разработчиками языка был предусмотрен парный тег <pre>.

С его помощью определяется отдельный блок текстового контента, который будет отображаться моноширинным шрифтом и сохранять все пробельные символы. В добавок к этому в элементе <pre> можно использовать и другие единицы html, кроме <img>, <small>, <sup>, <big>, <object> и <sub>.

Перейдем к конкретному примеру. Для сравнения я написал абзац обычного текста и абзац с использованием тега <pre>. Обратите внимание на шрифты и на расположение слов на странице.

cc6bdeadde3f0e8bc129573bdabc81be000

Аналог в стилевых таблицах css

Как всегда, в таблицах стилей есть аналогичный инструмент, работающий примерно также, как и тег <pre>. Это white- space. Но все же обратите внимание на некоторые отличия.

Главным преимуществом является то, что это свойство css не меняет шрифт на моноширинный. Также с помощью этого инструмента можно устанавливать разные режимы работы, указывая нужное ключевое слово.

Ключевое слово	Предназначение
normal	Привычное пользователю отображение контента.
inherit	Наследуются родительские параметры.
pre	Работает как элемент языка html <pre>.
nowrap	Пробельные символы игнорируются, и при этом весь текст выводится в одну строку. В случае необходимости появляется горизонтальный скролл.
pre- wrap	Работает как pre, однако если текст не помещается на экране по ширине, то он автоматически переносится.
pre- line	Заданный разработчиком перенос контента учитывается, однако пробелы удаляются до одного и происходит автоматический перенос на новую строку.

Теперь перейдем к программному коду. Обязательно попробуйте все режимы работы и проанализируйте разницу отображения предложений.

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Элемент pre</title>
<style>
p {
font-size: 19px;
text-decoration: overline; 
font-style: italic;
}
</style>
 </head>
 <body>
<p>Этот контент    отображается     только 
с одим пробельным символом между      словами!</p>
  <pre>
    <p>А этот абзац текста 
                      расположен в     элементе  
                                                   PRE!!</p>

Под конец следует обратить ваши взгляды на один недостаток: к сожалению, white-space работает не во всех браузерах. Думаю, вы догадались, что наиболее отличился Internet Explorer.

Специальные символы языка HTML

Помимо перечисленных инструментов существует так называемый неразрывный пробел, который выглядит следующим образом: &nbsp. Такой символ можно использовать подряд несколько раз и браузеры отобразят весь набор пробелов. Его очень удобно использовать при форматировании небольшого количества контента.

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>white-space</title>
<style>
p {
white-space: pre-wrap; // вот тут поменяйте ключевое слово
width: 52%;
font-size: 19px;
text-decoration: overline; 
font-style: italic;
}
</style>
 </head>
 <body>
<p>Тестовый пример     расположения
                                      текстового контента.
                                                                                                   Изменения будут заметны при 
                                                    использовании
                  разных режимов работы!</p>
</body>
</html>

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

С уважением, Роман Чуешов

Прочитано: 611 раз

Этот блог уже читают
читай и ты!

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

Денис

«Перейдем к конкретному примеру».
Код примера виден не полностью. У меня видны 20 строк и дальнейшей прокрутки нет.

11.03.2017 в 07:01

Ответить
Денис

До сих пор код примера не до конца виден. Причём только самый верхний код, остальные нормально отображаются. Код не полный, понятно из того, что в нём нет закрытых тегов body и html.

04.04.2017 в 23:15

Ответить