Как применить стиль переноса строки / продолжения и форматирование кода с помощью CSS

Question

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

Например, у вас может отображаться очень длинная командная строка, например:

c:\Program Files\My Application\Module\bin\..> Some_really_long_command line "with parameters" "that just go on and on" " that should all be typed on one line" "but need to be wrapped for display and I'd like the text style to indicate that it has wrapped"

(Stackoverflow заставляет такую ​​строку не переноситься.)

Есть ли способ стилизации с помощью CSS, который обеспечит ту же обработку, что и в книгах? то есть, чтобы обернуть линию, но включить изображение или глиф, который указывает продолжение строки.

Очевидно, что я ищу стиль, который можно применить ко всему тексту, и позволить движку рендеринга XHTML / CSS браузера выяснить, какие строки обернуты и, следовательно, нуждаются в специальной обработке.

Решение до сих пор ..

Добавление символов продолжения строки

Благодаря Джеку Райану и Мартену Сандеру, есть разумно работоспособное решение для добавления символов продолжения слева или справа от обернутых строк. Для этого требуется изображение с повторяющимися глифами по вертикали, которое смещено так, чтобы оно было невидимым, если бы была только одна развернутая строка. Основным требованием этого метода является то, что каждая строка должна находиться внутри блока (например, p, span или div). Это означает, что его нельзя легко использовать вручную с существующим текстом, который просто находится в предварительном блоке.

Фрагмент ниже суммирует основную технику. Я опубликовал живой пример здесь .

.wrap-cont-l {
  margin-left: 24px;
  margin-bottom: 14px;
  width: 400px;
}

.wrap-cont-l p {
  font-family: Courier New, Monospace;
  font-size: 12px;
  line-height: 14px;
  background: url(wrap-cont-l.png) no-repeat 0 14px; /* move the background down so it starts on line 2 */
  text-indent: -21px;
  padding-left: 14px;
  margin: 0 0 2px 7px;
}

.wrap-cont-r {
  margin-left: 24px;
  margin-bottom: 14px;
  width: 400px;
}

.wrap-cont-r p {
  font-family: Courier New, Monospace;
  font-size: 12px;
  line-height: 14px;
  background: url(wrap-cont-r.png) no-repeat right 14px; /* move the background down so it starts on line 2 */
  text-indent: -28px;
  margin: 0 0 2px 28px;
  padding-right: 14px;
}

Для использования следующим образом:

<div class="wrap-cont-l">
  <p>take a long line</p>
  <p>take a long line</p>
</div>
<div class="wrap-cont-r">
  <p>take a long line</p>
  <p>reel him in</p>
</div>

Но подождите, есть еще!

Недавно я обнаружил подсветку синтаксиса Алекса Горбачева. Это фантастический инструмент для динамического и автоматического форматирования текстовых блоков. Он в основном предназначен для подсветки синтаксиса кода, но может использоваться для любого текста. В v1.5.1, однако, он не переносит строки (фактически это заставляет их не переносить).

Хотя я немного взломал и смог добавить простой синтаксический индикатор для переноса строк, а также включить идею продолжения глифа.

Я добавил это к живым примерам и включил несколько заметок о необходимых взломах (они тривиальны). Так с этим, как текст на странице:

<textarea name="code" class="java:wraplines" cols="60" rows="10">
public class HelloWorld {

  public static void main (String[] args)

  {

    System.out.println("Hello World! But that's not all I have to say. This line is going to go on for a very long time and I'd like to see it wrapped in the display. Note that the line styling clearly indicates a continuation.");

  }

}
</textarea>

Это снимок отформатированного результата:

скриншот http://tardate.com/syntaxhighlighter/line-continuation-example.jpg

Answer 1

Вот один (неприятный) способ сделать это. Это требует ряда плохих практик. Но ТАК решает реальные проблемы, так что мы идем ...

Сначала каждая строка должна быть обернута в какой-то содержащий блок. Спан или р, вероятно, являются наиболее подходящими.

Тогда стиль содержащего блока должен иметь установленную высоту строки. и фоновое изображение, которое содержит несколько глифов newLine в начале каждой строки, кроме первой. Поскольку это код, было бы разумно ожидать, что он не будет переноситься более 5 раз. Так что повторение 5 раз, вероятно, достаточно.

Это может быть установлено в качестве фонового изображения и должно отображаться в начале каждой строки, кроме первой. Я думаю, что полученный CSS может выглядеть так:

p.codeLine
{
    font-size: 12px;
    line-height: 12px;
    font-family: Monospace;
    background: transparent url(lineGlyph) no-repeat 0 12px; /* move the background down so it starts on line 2 */
    padding-left: 6px; /* move the text over so we can see the newline glyph*/
}

Answer 2

Я нашел решение, очень похожее на решение Джека Райана, но с символом «продолжение» в конце строки. Он также отступает от продолжения.

CSS:

p {
  font-family: Arial, Sans-Serif;
  font-size: 13px;
  line-height: 16px;
  margin: 0 0 16px 0;
}

.wrap-cont {
  font-family: Courier New, Monospace;
  margin-bottom: 16px;
  width: 400px;
}

.wrap-cont p {
  background: url(wrap-cont.gif) no-repeat bottom right;
  text-indent: -32px;
  margin: 0 0 0 32px;
  padding-right: 16px;
}

HTML:

<p>For example, you may have a really long command line to display, like this:</p>
<div class="wrap-cont">
  <p>c:\Program Files\My Application\Module\bin\..&gt; Some_really_long_command line "with parameters" "that just go on and on" " that should all be typed on one line" "but need to be wrapped for display and I'd like the text style to indicate that it has wrapped"</p>
  <p>c:\Program Files\My Application\Module\bin\..&gt; Some_really_long_command line "with parameters" "that just go on and on" " that should all be typed on one line" "but need to be wrapped for display and I'd like the text style to indicate that it has wrapped"</p>
</div>
<p>Stackoverflow forces a line like this not to wrap.</p>

Answer 3

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

Answer 4

Этого нельзя сделать с помощью CSS. Сожалею. (