Два одинаковых деления за исключением отступа и отступа - почему они отображаются по-разному?

Я пытаюсь использовать text-align:justify в пространстве div одинаково в другом div. По какой-то причине это работает, если HTML с отступом, но не иначе. К сожалению, приложение, над которым я работаю, часто заставляет все HTML работать вместе в виде большой строки, поэтому мне нужно выяснить, как это сделать.

Вот ссылка на кодовое перо с обоими проблемами: http://www.codepen.io/evanhobbs/pen/LDgJc

И вот код:

1- Идентичен номеру 2, но со всеми отступами / отступами

<div class="equal-justify-wrapper">
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <span class="equal-justify-stretcher"></span>
</div>

2-. Идентичен номеру 1, но с удаленными интервалами и отступами

<div class="equal-justify-wrapper"><div>one</div><div>two</div><div>three</div><span class="equal-justify-stretcher"></span></div>

CSS

.equal-justify-wrapper {
  list-style: none;
  background-color:red;
  text-align: justify;
   -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
}

.equal-justify-wrapper > div {
     width: auto;
    //height: 40px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
    background: #000;
    color: yellow;

}

.equal-justify-stretcher {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}
Источник

2 ответа

Решение

Это потому, что когда между ними нет пробелов, они считаются одним словом (представьте длинное слово, в которое вы вставили теги, чтобы раскрасить некоторые буквы. Вы бы не хотели, чтобы слово там разделялось).

В первом случае пробел (ввод / табуляция) действует как граница слова.

Вам нужно ввести пробел между тегами для таких свойств, как text-align: justify; на родителя, чтобы вступить в силу.

Источник

Похоже, это правильное поведение. См. Выравнивание: свойство 'text-align' и контексты встроенного форматирования:

В случае 'justify' это свойство указывает, что блоки встроенного уровня должны быть сделаны заподлицо с обеими сторонами линейного блока, если это возможно, путем расширения или сжатия содержимого встроенных блоков, в противном случае выровняйте, как для начального значения.

Если свойство [text-align] имеет значение 'justify', пользовательский агент также может растягивать пробелы и слова во встроенных полях (но не в полях inline-table и inline-block).

Нет пробелов, нет оправдания.

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

Проблема в том, что вы используете фреймворк, потому что он слишком охотно удаляет пробелы. Чтобы решить эту проблему, вы должны найти способ сохранить пробелы. Вы можете попробовать использовать юникод html-сущность пробела: &#32;

Источник
Другие вопросы по тегам