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

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

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

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

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

15.08.2008 00:12:20
3 ОТВЕТА
РЕШЕНИЕ

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

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

15
25.06.2013 19:19:25
Самый простой подход заключается в использовании .hangcss в div, который в основном такой же, как span, но в качестве блочного элемента вместо встроенного текста. Необязательно, вы можете включить display:block;в .hangопределение, но затем снова использовать span для этого будет то же самое, что с использованием div ...
awe 12.09.2016 11:52:02

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

p {
  padding-left: 20px; 
} 

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

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

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

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

Пример JSFiddle

10
14.01.2016 19:36:30
Я думаю, что вы имеете в виду ": первый ребенок"
Andy Ford 11.11.2011 07:42:53
Я не думаю, что это будет ": первый ребенок". Не уверен, что ": first-letter" сделает это. Это не сработало в моих тестах. Можете ли вы предоставить jsfiddle?
Adam Youngers 18.10.2012 03:50:46
ссылка говорит, что свойства полей могут использоваться с:first-letter
gavsiu 19.03.2013 05:35:44
Я создал следующую [ссылку] (jsfiddle.net/David_Barnett/UqHQv/). Единственный недостаток этого метода заключается в том, что при выделении текста первая буква часто недоступна для выбора.
David Barnett 28.05.2013 12:35:06
или просто использоватьp { text-indent:-20px; padding-left:20px }
ysth 11.12.2013 18:14:57

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

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

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

4
14.01.2016 18:46:10
Протестировано в Chrome и не любит en . Googling en vs em отображается в виде ширины символа, характерного для тире, ничто не говорит о том, что я могу использовать его для пробелов.
agweber 29.04.2015 13:44:37