Подтвердить что ты не робот

Можно ли вставлять строки с надписью внутри блоков кода через CSS?

У меня есть код внутри HTML-документа. Сам код не важен - я использовал lorem ipsum, чтобы это стало ясно.

<pre><code>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed sit amet diam sit amet sem accumsan faucibus ac in arcu.
Quisque varius, erat vel euismod ornare, libero orci laoreet velit, at lobortis sem nisl et eros.</code></pre>

Я применил white-space: pre-wrap к блоку кода, чтобы принудительно обернуть длинные строки. Я хотел бы знать, возможно ли отступы обернутой части завернутых строк, чтобы дать что-то вроде этого:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed sit amet diam sit amet sem accumsan faucibus ac in arcu.
Quisque varius, erat vel euismod ornare, libero orci laoreet velit,
        at lobortis sem nisl et eros.
4b9b3361

ОТВЕТЫ

Ответ 1

К сожалению, после многократного поиска я пришел к выводу, что в настоящее время невозможно использовать только CSS. То, что требуется, - псевдоэлемент для каждой "линии" (соответствие текста /^.*$/m), что позволило бы отступом строк за пределами первого управляться с помощью CSS.

Я поднял эту проблему в списке рассылки www-стиля. ответы fantasai являются многообещающими, особенно предположение о том, что свойство text-indent можно расширить, чтобы разрешить text-indent: 2em hanging each-line.

Ответ 2

Это возможно... Я не использую теги <pre> и <code>, и я не уверен, насколько важны эти теги для вас... но я смог получить стиль, который вы ищете, и подражать форматированию как можно лучше. Проверьте это.

http://jsfiddle.net/PVZW5/7/

CSS

div {
    margin-left:24px;
    width:400px;
}

p {
    font-family: "Courier New", Courier, monospace;
    font-weight: normal;
    font-style: normal;
    font-size: 13px;
    margin:0 28px;
    text-indent: -28px;
}

HTML

<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Sed sit amet diam sit amet sem accumsan faucibus ac in arcu.</p>
    <p>Quisque varius, erat vel euismod ornare, libero orci laoreet velit, at lobortis sem nisl et eros.</p>
</div>

Посмотрите этот вопрос SO и некоторые решения, которые пришли от него. Это актуально для вашего вопроса. Возможно, стоит посмотреть время:)

Надеюсь, это поможет!

Ответ 3

text-indent: -2em;
padding-left: 2em;

Ответ 4

В настоящее время возможно только с CSS, но с помощью языка сценариев...

PHP

echo '<pre id="the_pre_id"><div>'.str_replace("\n",'</div><div>',$text).'</div>';

или JavaScript

var el = document.getElementById('the_pre_id');
el.innerHTML='<div>'+el.innerHTML.replace(/\n/g, '</div><div>')+'</div>';

Примечание. Вам нужно только выбрать один из приведенных выше фрагментов. Оба выполняют одно и то же.

Мы загрязняем разметку (не семантические теги), но это позволяет нам создавать правила в стиле строки:

CSS

pre{
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
pre > div {
    padding-left: 1em;
    text-indent: -1em;
}

И у нас есть именно тот эффект, который вы ищете...

Результат

Lorem ipsum dolor sit amet, consectetur
  adipiscing elit.
De malis autem et bonis ab iis animalibus,
    quae nondum depravata sint, ait optime
    iudicari
. Quae cum praeponunt, ut sit aliqua rerum
    selectio, naturam videntur sequi; Квази
    ego id curem, quid ille aiat aut neget.