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

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

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

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

Источник

4 ответа

Решение

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

text-indent: -10px;
margin-left: 10px
Источник 
p {
  text-indent: -1em;
  padding-left: 1em;
}
Источник

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

текст-отступ на MDN

Источник

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

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

Пример JSFiddle

Источник

Опираясь на ответ @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
Источник
Другие вопросы по тегам