Сведения о вопросе

LiKIY

16:03, 28th August, 2020

Теги

html   css   indentation    

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

Просмотров: 432   Ответов: 3

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

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

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

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



  Сведения об ответе

PROGA

00:36, 8th August, 2020

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

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


  Сведения об ответе

prince

23:52, 20th August, 2020

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

p {
  padding-left: 20px; 
} 

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

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

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

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

JSFiddle пример


  Сведения об ответе

+-*/

10:01, 13th August, 2020

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

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

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


Ответить на вопрос

Чтобы ответить на вопрос вам нужно войти в систему или зарегистрироваться