Отображать символы вкладки в HTML

Мне нужно отобразить текст на веб-странице. Текст поступает из источников, находящихся вне моего контроля, и форматируется с использованием символов новой строки и символов табуляции.

Новые строки (\n) можно заменить тегами br, но как насчет сохранения вкладок? Краткий поиск показывает, что нет способа напрямую визуализировать символы табуляции в HTML.

ОТВЕТЫ

Ответ 1

replace \t with      

Каждое пространство, которое вы хотите, будет  

Как было указано, это не совсем корректно, поскольку он просто притворяется вкладкой, поскольку HTML фактически не выводит формат вкладки, как вы ожидали.

Ответ 2

Почему бы просто не обернуть содержимое тегом <pre>? Это будет обрабатывать символы \n, а также символы \t.

Ответ 3

Альтернативой неразрывному пространству будет em-пространство (&emsp; или &#x2003;). Обычно это отображается как более длинное пространство, если это преимущество.

Ответ 4

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

str_replace("\t", '&nbsp;&nbsp;&nbsp;&nbsp;', $text);

Ответ 5

Быстрый & Грязный путь

Для быстрого исправления вы можете использовать тег xmp, чтобы запретить браузеру сворачивать пробелы. Тег xmp содержит текст, который должен отображаться не интерпретированным (и моноширинным шрифтом).

Проблема в том, что теги xmp устарели со времен HTML3.2 и вообще были исключены из спецификации HTML5. На практике браузеры по-прежнему поддерживают теги xmp, поэтому они могут быть полезны, но не в производстве.

Правильный путь

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

Представьте, что у вас есть эта строка (с выравниванием по табуляции) для начала:

Spam    1.99
Cheese  2.99

В переводе на HTML эта строка будет выглядеть следующим образом:

<table>
    <tr> <td> Spam   </td> <td> 1.99 </td> </tr>
    <tr> <td> Cheese </td> <td> 2.99 </td> </tr>
</table>

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