Можно ли сделать отступ в обернутых строках внутри блоков кода с помощью CSS?

Question

У меня есть код внутри 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.

Я применил 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.

Answer 1

Это возможно ... Я не использую теги <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>

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

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

Answer 2

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

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

Answer 3

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

Answer 4

В этой статье есть решение, использующее псевдоселектор первого типа, который, как мне кажется, пока работает для меня: http://thenewcode.com/50/Classic-Typography-Effects-in-CSS-Hanging-Indent

html{
  margin-left: 100px;
}
p {
	margin: 6em inital;
  width: 300px;
}
p:first-of-type {
	text-indent: -4em;
}

<p>Leverage agile frameworks to provide a robust synopsis for high level 
overviews. Iterative approaches to corporate strategy foster collaborative
  thinking to further the overall value proposition.</p>
<p>Bring to the table win-win survival strategies to ensure proactive domination. 
At the end of the day, going forward, a new normal that has evolved from 
generation X is on the runway heading towards a streamlined cloud solution. 
  User generated content in real-time will have multiple touchpoints for offshoring.</p>

Answer 5

В настоящее время невозможно только с помощью 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
жадный элит.
De malis autem и bonis ab iis animalibus,
quae nondum depravata sint, ait optime
iudicari.
Quae cum praeponunt, ut sit aliqua rerum
selectio, naturam videntur sequi;Quasi
ego id curem, quid ille aiat aut neget.

Answer 6

Я не уверен, работает ли это в <pre>, но выглядит многообещающе.

http://www.ehow.com/how_2382848_hanging-indent-css.html