Почему не работает вёрстка блока?

Question

[Bestolkovy]

Добрый день!

Второй день не могу понять, почему не работает вёрстка блока.

Пытаюсь сделать как в Notepad++, чтобы длинные строки ПРОДОЛЖАЛИСЬ (после переноса на новую строку) там же, где и начались (а не сначала блока).

Сделал с помощью display: table;, но внутри получился другой другой межстрочный интервал (уменьшенный). Отметка на рисунке 1.

И почему левое поле с нумерацией, тоже имеет различную высоту? Отметка на рисунке 2.

Вот песочница: jsfiddle

А вот проблемы:



Может быть, можно как-то сделать с помощью flex?

Answer 1

[Антон Нагаец]

1) Поменяй в следующем блоке
word-break: break-all; на word-wrap:brake-word;

pre.code code {
  display: block;
  font-size: 12px;
  line-height: 20px;
  font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', monospace;
  white-space: pre-wrap;
word-wrap:brake-word;
  background: rgba(0, 0, 0, 0);
}

2) Все правильно и будет прыгать.у тебя не отрегулированы внешние отступы.

Comments

[Bestolkovy]

Большое спасибо. Но, 1 - не помогло https://jsfiddle.net/18kogzgL/1/

[Антон Нагаец]

Странно очень что у вас не работает Попробуйте Overflow-wrap https://www.w3.org/TR/css-text-3/#overflow-wrap