Текстовый отступ после первой строки в абзаце

- Репортер Reuters в Сурхродском районе провинции Нангархар, где жители деревни заявили о набегах, сказал, что афганская полиция выстрелила в толпу, после того как некоторые из них начали бросать камни в здания локальных органов власти.

В вышеприведенном абзаце я хотел бы использовать CSS, чтобы все строки после первой строки автоматически отступали от некоторого пробела, чтобы каждая строка оставалась прямо после - в первой строке.

HTML

<p> - A Reuters reporter in Surkhrod district in Nangarhar province, where 
villagers said the raids took place, said Afghan police fired at the crowd 
after some of them started throwing stones at local government buildings.</p>

Он похож на элемент списка со статусом списка, установленным на внешний, но я не хочу использовать список.

Каков самый простой способ, которым вы можете думать о достижении этого эффекта? Менее дополнительные html-разметки будут лучше.

Большое спасибо всем вам.

Ответ 1

Вам нужен text-indent. Обычно text-indent сдвигает первую строку внутрь, но если вы зададите ей минус и используете положительное поле, вы сможете добиться желаемого эффекта.

text-indent: -10px;
margin-left: 10px

Ответ 2

p {
  text-indent: -1em;
  padding-left: 1em;
}

Ответ 3

Не использовать сейчас, но если вы активируете Экспериментальный флагов веб-платформы на хроме, вы можете использовать text-indent:1em each-line;, который должен делать именно то, что вы хотите.

текстовый отступ на MDN

Ответ 4

На встроенных элементах, возможно, это работает по-другому, я заметил. Мне нужно было "outdent" (первая строка дальше слева от остального абзаца) и заметила, что приведенные выше предложения сделали наоборот - создали обычный отступ (где первая строка далее ПРАВО, чем другие строки). Вот что работает для встроенного элемента, например, тега "a":

#myDiv ul li { margin-left:1em; }
#myDiv ul li a { color:#333; text-indent:0.5em; margin-left:-1em; line-height:1; }

Я также установил, что содержащий элемент блочного уровня имеет запас 1em, так что, когда начальные элементы "a" начинаются с их отрицательных полей, они фактически позиционируют точно, где бы я был изначально, прежде чем возиться с сделать "outdent".

Надеюсь, это поможет кому-то! Я также заметил, что на моем встроенном элементе нет элемента управления размером самого текстового отступа....

Пример JSFiddle

Ответ 5

Опираясь на @kennytm ответ; если вы хотите выровнять моноширинный текст, используйте единицы ch вместо единиц em. Например:

<div class="query-select">SELECT Field1, Field2, Field3, Field4, Field5, Field6, Field7, Field8, Field9, Field10</div>

с дополнением ch -based/отрицательными отступами

.query-select {
  padding-left: 8ch;
  text-indent: -7ch;
}

Будет отображаться (в зависимости от ширины страницы) как:

  SELECT Field1, Field2, Field3, Field4, Field5, Field6, 
         Field7, Field8, Field9, Field10