Каков наилучший способ отступов текста в DIV, когда он обертывается?

Итак, у меня есть DIV, который содержит некоторый динамический текст. Скажем, я знаю текст и размер шрифта, но я не знаю размер DIV. Я бы хотел, чтобы отображение текста в DIV было достаточно интеллектуальным, чтобы отображать отступы, когда текст обертывается.

Скажите, что мой оригинальный текст выглядел примерно так:

Lorem ipsum dolor sit amet, 
consectetur adipisicing 
elit, sed do eiusmod 
tempor incididunt

Вместо этого я хочу, чтобы он выглядел так:

Lorem ipsum dolor sit amet, 
   consectetur adipisicing 
   elit, sed do eiusmod 
   tempor incididunt

Какой лучший способ сделать это, если я не знаю размер DIV априори? И какой лучший способ сделать это, если я знаю размер?

Спасибо!

Ответы

Ответ 1

Если я понимаю, о чем вы просите, это работает для меня:

div {
    padding-left: 2em;
    text-indent: -2em;
}

Ответ 2

W3C говорит, что вам просто нужно использовать свойство text-indent.

источник

.indentedtext
{
    text-align:start;
    text-indent:5em;
}

Ответ 3

Не уверен в поддержке кросс-браузера, но вы можете использовать псевдо-элемент первой строки:

p {padding:10px;}
p:first-line {padding-left:0px;}

<p>Hello World, I'm Jonathan Sampson</p>

Будет diplayed как

Привет, мир Я
    Jonathan
    Сэмпсон

Кроме этого, вы можете дать элемент left-padding, а затем отрицательный текст-отступ.

Ответ 4

Это должно работать одинаково хорошо для DIV с переменным и фиксированным размером.

<div style="width: 150px; text-indent: -2em; padding-left: 2em;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt.
</div>