Каковы правила появления последовательных пробелов в html?

Question

Я думал, что &nbsp необходимо каждый раз, когда вы хотите, чтобы в html отображалось более одного пробела, но этот сайт показывает мне, что несколько последовательных пробелов отображаются ... почемуэто что?

Answer 1

Если вы внимательно посмотрите на источник (до того, как он будет интерпретирован браузером), вы обнаружите, что веб-сайт действительно очень интенсивно использует   на сайте:

Пример (до ONE FOR ROAD строка)

<span style="line-height: 23px;"class="style_3">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span>

<span style="line-height: 23px; " class="style_1">
    ONE FOR THE ROAD
</span>

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

Answer 2

Гораздо чище использовать свойство CSS white-space.

Если установить значение pre или pre-wrap или pre-line, все они будут отображаться с несколькими пробелами (обработка разрывов строк будет отличаться для каждого).

Вот хороший пост об этом: http://www.impressivewebs.com/css-white-space/

Answer 3

Обычный пробел () переносится на следующую строку. Неразрывный пробел   предотвращает перенос на следующую строку.

Предположим, что | | стороны div:

Вот как будет отображаться обычный пробел:

| |    
| |
| |
| |

Однако неразрывный пробел будет продолжен на той же строке. В HTML это приведет к тому, что элемент, в котором находится пространство, растянется за пределы auto width.

|  |    
| |
| |
| |

Это, в свою очередь, вытолкнет всю ширину этой стороны:

|  |    
|  |
|  |
|  |

Отрисовывается несколько пробельных символов, однако они не работают так же, как неразрывные пробелы.

Взгляните на этот jsFiddle , он устранит любую путаницу.

Answer 4

@ Damon

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

Когда вы просматриваете источник сайта, который вы упоминаете , вы видите, что сайт фактически использует сущность   для форматирования текста:

<span class="style_3" style="line-height: 23px; ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>