разрешают больше пробелов, чем просто одно место в HTML

Question

, поэтому у меня есть div, у которого есть вкладки, разрывы строк и т. Д. Но по какой-то причине, ДИВ отображает все вместе ...

вот пример ДИВ:

<div> 
    the(5 spaces after this)  re is a tab here  and now I break line 
    twice now 

      there are two tabs before me too 
</div> 

почему это происходит и как она у меня с оригинальным белым пространством?

jsfiddle

Answer 1

Вы можете обернуть текст в <pre> элемента или с помощью CSS вы можете использовать white-space: pre;

div { 
    white-space: pre; /* or pre-wrap if you want wrapping */ 
} 

http://jsfiddle.net/yTEm3/4/

Answer 2

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

Всякий раз, когда это становится проблемой, вы должны рассмотреть, что такое контент и структура. Возможно, вы должны использовать элемент table, чтобы представить табличные данные или использовать CSS для настройки интервала здесь и там. Использование элемента pre или CSS-критерия white-space: pre следует рассматривать как последнее средство или как быстрый и грязный трюк, так как он эффективно означает выход из мира HTML и запрос браузеров выступать в качестве упрощенных средств визуализации обычного текста для контента.