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

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

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

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>

Но подождите, там еще!

Недавно я обнаружил syntaxhighlighter от Alex Gorbatchev. Это фантастический инструмент для динамического и автоматического форматирования текстовых блоков. Он в основном предназначен для кода подсветки синтаксиса, но может использоваться для любого текста. Однако в версии 1.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 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

Ответ 1

Вот один (неприятный) способ сделать это. Это требует множества плохих практик. Но SO - это решение реальных проблем, поэтому мы идем...

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

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

Затем это можно установить как фоновое изображение и должно отображаться в начале каждой строки, кроме первой. Я предполагаю, что полученный 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*/
}

Ответ 2

Я нашел решение, очень похожее на Jack Ryan's, но с символом "продолжения" в конце строки. Он также отступает от продолжения строк.

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>

Ответ 3

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

Ответ 4

Если вы хотите, чтобы это было однозначно, вам нужно добавить разметку. Я бы предложил использовать <ol> с одним элементом списка на строку кода, потому что таким образом вы получаете нумерацию строк бесплатно. Если это слишком много работы по всему сайту, вы всегда можете добавить его с помощью Javascript.