Как вывести в html текст как есть чтобы отобразились все пробелы
HTML5 IE Cr Op Sa Fx
Тег PRE - ----- ----- |----- ||----| ----|| ||----- -----|| ||-----| |-----|| || ----- ------|| ||- ----| |------|| ||---||-- -------|| ||--|| --| |-------|| || -|| |-- --- - --|| || -|| --|-|--| - ---| |---|| |-----| |-----| |---|| |---- |-----| |----| --- |-----| |----- ------|
Результат данного примера показан ниже.
Рис. 1. Вид текста, оформленного с помощью тега
Все что нужно знать о HTML элементе «pre»
Элемент HTML pre является простым способом отображения отформатированного контента (например, исходного кода), но у него есть несколько интересных особенностей. Давайте поговорим о том, как работает этот элемент, о потенциальных проблемах, о которых следует помнить.
Как работает
В HTML документе элемент отображает предварительно отформатированный текст. Это означает, что отступы, сделанные с помощью tab, двойные пробелы, переносы строки и другие типографские символы будут сохранены внутри элемента .
По умолчанию браузеры отображают содержимое элемента , с помощью моноширинных шрифтов, таких как Courier или Monaco. Это обычное дело для вывода кода.
Давайте рассмотрим пример предварительно отформатированного текста.
Если бы вы разместили тот же текст в другом элементе, скажем div то, все ваши двойные пробелы, переносы строки и отступы просто игнорировались бы. Таким образом, даже в вашем коде текст будет выглядеть следующим образом:
Jack: Hello. How are you? Jill: I'm great. Thanks for asking.В результате мы увидим следующее:
Тот же текстовый блок внутри будет отображён со шрифтом одного размера и со всем вашим дополнительными пробелами и прочими деталями:
Jack: Hello. How are you? Jill: I'm great. Thanks for asking.
Правильная разметка в исходном коде
Элемент должен использоваться для текста, который имеет типографское форматирование. Поскольку это влияет на значение содержимого, например в стихах, транскрипциях и, конечно же, в программном коде.
Если вы хотите отобразить блок исходного кода HTML документа, то используйте элемент , вложенный в элемент . Это позволит поисковым ботам, социальных приложениям, RSS ридерам сразу же понять, что перед ними программный код.
Пример отображения JavaScript кода:
// Logs "Hello World!" // in the browser's developer console console.log("Hello World!");Использование вложенных элементов HTML
Вы можете использовать другие HTML элементы внутри и, тем не менее, они будут отображаться корректно.
Для демонстрации концепции, я разметил некоторые em и strong элементов, а так же изменил цвет текста, используя атрибут style.
var total = 0; // Add 1 to total and display in a paragraph document.write('<p>Sum: ' + (total + 1) + '</p>');
Проблемы
Теперь, когда мы обсудили, как работает элемент , давайте рассмотрим несколько потенциальных проблем, которые могут возникнуть при его использовании.
Выход за пределы элемента
По умолчанию, текст внутри элемента отображается как в источнике, так что, слишком широкие строчки могут выйти за границы родительского контейнера.
Ниже приведён пример макета страницы с выходящим за границы содержанием.
Давайте рассмотрим несколько вариантов решения данной проблемы.
Решение №1: Вывод полосы прокрутки
Одним из способов избежать описанной выше проблемы является отображение полосы прокрутки. Это действенно когда содержание элемента слишком широкое. Можем воспользоваться CSS:
В этом случае пользователю нужно будет прокрутить страницу по горизонтали, чтобы увидеть все содержимое элемента . Однако горизонтальная прокрутка не является идеальным вариантом. К тому же полоса прокрутки не слишком эстетична.
Решение №2: Перенос текста на новую строку
В данном случае, тоже можем воспользоваться CSS, а именно свойство white-space :
Отображение HTML
Существует определённый тип исходного кода, с которым немного сложнее работать внутри элемента , я говорю о HTML. Ранее я уже упоминал о том, что вы можете вложить HTML элементы внутрь элемента . Но что, если мы захотим показать эти теги так, чтобы читатель смог их увидеть в отображаемом коде?
Для отображения HTML тегов в браузере вы, как правило, должны заменить HTML скобки. Допустим, мы захотели показать следующую разметку внутри тегов :
Заменяем символы , и «:
<nav href="/">Home</a></li> <li><a href="about.html">About Us</a></li> <li><a href="contact.html">Contact Us</a></li> </ul> </nav>
К счастью, существует множество инструментов, которые помогут вам сделать это. К примеру, Free Online HTML Escape Tool.
Случайные пробелы
Ещё один нюанс, который нужно учесть, это появление нежелательных пробелов, отступов и переносов строк.
Многие из нас используют отступ в HTML для иллюстрации иерархии элементов. Это может вызвать проблемы. Позвольте мне показать, что я имею в виду.
Если мой HTML документ имеет следующую структурную (отступы для иллюстрации вложенных элементов), то отображение будет следующим:
My tutorial My Tutorial's Title
Here's some example JavaScript:
<script type="text/javascript"> console.log('Hello there'); </script>
Проблема в том, что элемент pre, по праву, рассматривает мои отступы как часть своего содержания. Таким образом, содержание отображается с нежелательными отступами:
Чтобы точно отобразить содержание мне придётся написать его так, чтобы в содержании не было отступов вообще:
My tutorial My Tutorial's Title
Here's some example JavaScript:
<script type="text/javascript"> console.log('Hello there'); </script>
Теперь содержание будет отображаться вот так:
Плагины для подсветки кода
Одно из самых простых улучшений — это подключение плагина подсветки синтаксиса. Это делает код более ярким, понятным, простым для чтения.
Существуют тысячи синтаксических маркеров, а так же множество методов для реализации синтаксиса на веб-странице, такие как плагины JavaScript, классы PHP, Rails gem. За вами остаётся лишь выбор того метода, который лучше всего удовлетворит ваши пожелания.
Также я должен отметить, что подсветка синтаксиса может в значительной мере увеличить время отклика ваших веб-страниц.
В завершение
Итак, мы широко затронули тему элемента — как его использовать, каких вещей стоит опасаться, какие существуют способы улучшения его работы.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.sitepoint.com/everything-need-know-html-pre-element/
Перевел: Станислав Протасевич
Урок создан: 4 Октября 2014
Просмотров: 46152
Правила перепечатки5 последних уроков рубрики «HTML и DHTML»
Лайфхак: наиполезнейшая функция var_export()
При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.
17 бесплатных шаблонов админок
Парочка бесплатных шаблонов панелей администрирования.
30 сайтов для скачки бесплатных шаблонов почтовых писем
Создание шаблона для письма не такое уж простое дело. Предлагаем вам подборку из 30 сайтов, где можно бесплатно скачать подобные шаблоны на любой вкус.
Как осуществить задержку при нажатии клавиши с помощью jQuery?
К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.
Теряются пробелы в начале или в конце строки при выводе из базы в html
@Taarim, база mysql, сохраняю пока в phpmyadmin, пробел при сохранении есть и потом в базе при просмотре он есть, чистый php.
11 июл 2019 в 10:16
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Пробелы и переносы в конце строк в HTML обрезаются. Так сделано для того, чтобы форматировать HTML красивой «ёлочкой». Чтобы выводить корректно всё, что у вас прилетело из бд, можно использовать . Кроме того не забывайте, что в строках из базы могут прилететь символы имеющие специальное значение в HTML, используйте htmlspecialchars .
Отслеживать
ответ дан 11 июл 2019 в 10:20
Егор Банин Егор Банин
6,662 1 1 золотой знак 7 7 серебряных знаков 18 18 бронзовых знаков
Спасибо! То, что нужно!
11 июл 2019 в 10:22
Только сейчас пришла такая мысль: а можно ли пробелы в html помечать так, как они помечаются в непечатаемых символах MS Word (то есть, точкой в середине высоты строки)? Так они сразу бросаются в глаза.
11 июл 2019 в 10:29
@forever_young можно. Для этого надо использовать специальный шрифт в котором пробелы отображаются так точки. Такой шрифт можно сделать самому, заменив символ пробела на точку в каком-нибудь редакторе шрифтов. Менее хлопотный способ подсветить пробелы — это подчеркнуть текст ( text-decoration: underline )
Тег pre, преформатированный текст
В этой записи мы экспериментируем с ASCII-графикой и пытаемся нарисовать котика. Но ничего не получается, так как отображение кода в HTML-редакторе и в мини-браузере отличаются. Вы можете ставить сколько угодно пробелов в HTML-коде, но браузер всё равно отобразит их как один. То же самое с переносами строк — они не сохраняются при отображении в браузере.
Изменить это поведение можно с помощью тега (сокращение от «preformatted text»), который обозначает «предварительно отформатированный текст». Чаще всего этот тег используется для отображения примеров кода, реже применяется для отображения картинок ASCII Art. Браузер сохраняет и отображает все пробелы и переносы, которые есть внутри тега .
И результат отображения в браузере:
Пример преформатированного текста с сохранёнными пробелами и переносами строкМы добавили немного стилей (параметры шрифта и цвет текста), чтобы содержимое смотрелось красивее. Вы можете изучить стили во вкладке style.css .
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим
Блог
День пятый. Отдыхаю
Решил отвлечься. Смотрите, что нарисовал.
/\_/\ ( o.o ) = ^ =
body < padding: 0 30px; font-size: 14px; line-height: 22px; font-family: "Georgia", serif; color: #222222; >h1 < font-size: 20px; line-height: normal; >nav < color: #888888; >aside < margin: 20px 0; color: #c4c4c4; >pre < line-height: normal; font-family: "Courier New", "Courier", monospace; color: #6a2cce; >
Проверить на сервере Проверка проводилась слишком много времени, попробуйте ещё разок Показать ответ
Спасибо! Мы скоро всё исправим)
Автозапуск
Код изменился, нажмите «Обновить» или включите автозапуск.
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
Увеличить 100% Уменьшить
Задачи Выполнено
- Оберните весь текст после первого абзаца в .
Если у вас возникли сложности во время прохождения задания, то вы можете обратиться за помощью на наш форум или задать вопрос в Телеграм-чате.
- Наша группа в VK
- Наш канал на YouTube
- Наша страница в Twitter
- Наш канал в Telegram