Отступ текста после первой строки абзаца
Описание проблемы
Я пытаюсь создать эффект, при котором все строки после первой строки в абзаце автоматически отступают так, чтобы они располагались прямо под "- " из первой строки. Вот пример текста, который у меня есть:
<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>
Хотя это можно реализовать с помощью элементов списка, я не хочу использовать списки, так как это не совсем то, что мне нужно.
Как проще всего достичь такого эффекта с использованием только CSS? Я предпочел бы минимальное количество дополнительных HTML-разметок.
Заранее спасибо за ваши предложения!
2 ответ(ов)
Строя на ответе @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
Ваш приведенный CSS-код производит отступ текста в абзаце, используя свойства text-indent и padding-left. Вот что происходит с каждым из этих свойств:
p {
text-indent: -1em; /* Отрицательный отступ в начале абзаца на 1em */
padding-left: 1em; /* Добавляет внутренний отступ слева на 1em */
}
text-indent: -1em;- Устанавливает отрицательный отступ для первой строки абзаца. В данном случае первая строка будет сдвинута влево на 1em, что означает, что она будет выдвинута за пределы обычного блока текста.padding-left: 1em;- Создает внутренний отступ слева на 1em для всего абзаца, увеличивая общий отступ текста с помощью этого свойства.
Таким образом, в результате применения этих стилей первая строка будет находиться на уровне, более низком, чем остальные строки абзаца, поскольку она выдвинута влево, а весь текст абзаца будет сдвинут вправо на 1em. Это можно использовать для создания интересных визуальных эффектов в вашем дизайне.
Как расположить div внизу своего контейнера?
Установить фиксированную ширину столбца таблицы независимо от количества текста в ячейках?
Как сделать перенос строки с помощью CSS, не используя <br />?
Стоит ли использовать единицы px или rem в CSS? [закрыто]
Как изменить цвет заливки SVG-изображения при использовании его в качестве фонового изображения?