Как создать стиль висячего отступа, совместимый с браузером, в CSS в диапазоне

StackOverflow https://stackoverflow.com/questions/11809

  •  08-06-2019
  •  | 
  •  

Вопрос

Единственное, что я нашел, это;

.hang {
    text-indent: -3em;
    margin-left: 3em;
}

Единственный способ добиться этого — поместить текст в абзац, что приведет к появлению этих ужасно некрасивых дополнительных строк.Я бы предпочел просто иметь их в <span class="hang"></span> тип вещи.

Я также ищу способ дальнейшего отступа, а не просто одноуровневое подвешивание.Использование абзацев для размещения отступов не работает.

Это было полезно?

Решение

<span> является встроенным элементом.Термин висячий отступ бессмысленно, если вы не говорите о абзаце (который обычно означает блочный элемент).Вы, конечно, можете изменить поля на <p> или <div> или любой другой блочный элемент, чтобы избавиться от лишнего вертикального пространства между абзацами.

Вы можете захотеть что-то вроде display: run-in, где тег станет блочным или встроенным в зависимости от контекста...к сожалению, это еще не повсеместно поддерживается браузерами.

Другие советы

Нашел классный способ сделать это, без неприятного промежутка.

p {
  padding-left: 20px; 
} 

p:first-letter {
  margin-left: -20px;
}

Красиво и просто :D

Если вас беспокоят новые строки в блоках p, вы можете добавить

p {
  margin-top: 0px;
  margin-bottom: 0px;
}

Пример JSFiddle

Ответ ysth является лучшим, за одним спорным исключением;единица измерения должна соответствовать размеру шрифта.

p {
  text-indent: -2en; 
  padding-left: 2en;
}

«3» также подойдет;«em» не рекомендуется, так как он шире среднего символа алфавитного набора.«px» следует использовать только в том случае, если вы намереваетесь выровнять выступы текстовых блоков с разными размерами шрифта.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top