Обоснуйте текст, чтобы заполнить div

Question

Что я хочу сделать, это примерно так:

1 2 3 4 5
6       7
8 9 10 11

С этим кодом:

<div style="text-align: justify;">
1 2 3 4 5
<br>
6 7
<br>
8 9 10 11
</div>

Но это не работает, и отображается так:

1 2 3 4 5
6 7
8 9 10 11

Answer 1

В приложениях DTP и обработки текста этот параметр называется «принудительное выравнивание». К сожалению, это не вариант в CSS.

Answer 2

Justify занимает всю строку только тогда, когда текст переносится на следующую строку.Если вы хотите, чтобы он был перенесен, вам нужна более узкая ширина div, и вам нужно удалить свои <br /> s.

Вы можете начать с чего-то вроде этого (но просто не знаете, как разместить 7место как 5 и 11):

<div style="text-align: justify;">
1 2 3 4 5
<br>
<span style="text-align:left;">6</span>
<span style="float:right;">7</span>
<br>
8 9 10 11
</div>

Answer 3

Вот еще несколько хитростей, чтобы найти решение:

<code><pre><div>1 2 3 4<br/>4     6<br/>7 8 9 0</div>

См. Демонстрацию здесь

Answer 4

Еще один вариант, хотя и немного уродливый с  .

Демонстрация в реальном времени

<div style="width:60px;text-align: justify;">
    1 2 3 4 5 6 &nbsp; &nbsp; &nbsp; &nbsp; 7 8 9 10 11
</div>

Другие опции без nbsp;

<div style="width:60px;text-align: justify;">
    1 2 3 4 5 6 <span style="width:30px; display:inline-block;"></span> 7 8 9 10 11
</div>