Отступ текста после первой строки в абзаце - PullRequest
Новая
       40

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

44 голосов
/ 14 мая 2010

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

В приведенном выше абзаце я хотел бы использовать 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-разметок, тем лучше.

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

Ответы [ 5 ]

72 голосов
/ 14 мая 2010

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

text-indent: -10px;
margin-left: 10px
41 голосов
/ 14 мая 2010 
p {
  text-indent: -1em;
  padding-left: 1em;
}
2 голосов
/ 18 января 2017

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

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

1 голос
/ 20 апреля 2015

На встроенных элементах, может быть, это работает иначе, я заметил. Мне нужен был «отступ» (первая строка дальше, чем остальная часть абзаца), и я заметил, что приведенные выше предложения сделали противоположное - создали обычный отступ (где первая строка более правая, чем другие строки). Вот что работает для встроенного элемента, например, тега «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", с их отрицательными полями, они фактически располагаются именно там, где я изначально находился, прежде чем возиться с сделай "отступник".

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

Пример JSFiddle

0 голосов
/ 05 мая 2019

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

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

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

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

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

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