2014-01-23 2 views
1

Это пример fiddle.Как отменить весь текст в абзаце, кроме первой строки?

То, что я пытаюсь сделать, является отступом всего после первой строки.

Прямо сейчас это выглядит следующим образом:

Categories: Aperiri 
nostrum similique cu 
pro, maiorum delectus 
quo eu. Mentitum 

Я пытаюсь заставить его выглядеть следующим образом:

Categories: Aperiri 
    nostrum similique cu 
    pro, maiorum delectus 
    quo eu. Mentitum 

Я попытался добавить в CSS:

display: block; 
margin: 2px; 

Но это закручивает мою текстовую упаковку.

Как я могу иметь встроенный дисплей, но также и отступ после первой строки в css?

+0

Самый быстрый способ - просто обернуть текст, который вы хотите отступом, в '' и стиль этого диапазона. – ElendilTheTall

+0

Связанный: http://stackoverflow.com/q/20510651/2680216 –

ответ

1

Как об этом:

.hClass p{ 
    padding-left: 20px; 
} 


.iClass{ 
    font-style: oblinque; 
    color: rgb(136, 136, 136); 
    font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif; 
    margin-left: -20px; 
} 

См: http://jsfiddle.net/gVJK8/5/

5

Свойство text-indent можно использовать с отрицательным результатом и скомпенсировать его левым покровом.

Например:

.negative-indent { 
    margin-left: 40px; 
    text-indent: -40px; 
} 

Ссылка для text-indent собственности: MDN

+0

Могу ли я сделать это с отображением: inline; ? – Grammin

+0

Я обновил свой jsfiddle, и он выглядит не так. http://jsfiddle.net/QvpL4/ – Grammin

+0

Я считаю, что код [ниже] (http://stackoverflow.com/a/21316564/3227787) решает вашу проблему. Проблема в том, что вы пытались заставить его работать для комбинации двух div, а при настройке CSS только одного из них. :) –

4

Использование: первая линия унд текста отступа тегов. Поместите весь текст в один блок (div или paragraph). Отступ все линии, а затем установить первую строку в текст-отступов = 0.

Пример:

p { text-indent: -10px } 
p:first-line { text-indent: 0 } 
0

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

После долгих попыток я обнаружил, что следующее не связано с ними.

text-indent: 0.5em hanging; 

Только пробовал в Chrome.

Смежные вопросы