CSS обивка автоматический перевод строки

Я следующий HTML:CSS обивка автоматический перевод строки

<div class="container"> 
    <div class="header"> 
    <h1> 
     a very long long long, really very very long headline ... 
    </h1> 
    </div> 
</div>

и следующие CSS:

.container{ 
    width:200px; 
} 

.header h1{ 
    background-color: #e0e0e0; 
    display: inline; 
    padding: 2px 8px; 
    color: black; 
    font-size: 16px; 
    font-weight: normal; 
    line-height: 30px; 
}

Проблема заключается в том, что браузер добавляет разрыв строки из длинного заголовка и малой ширины контейнер для упаковки. Хорошо. Но padding-left не будет добавляться к сломанной второй и дальнейшим линиям. Я могу сделать это с отрицательным текстовым отступом и положительным отступом слева от .header. но фоновый цвет не будет перемещен влево, поэтому кажется, что все равно будет нулевое дополнение.

Как это изменить? Любой трюк доступен?

Большие поздравления, Фальк

источник

2014-09-29 Falk

Любопытно, зачем использовать тег 'h1' и переопределять его как' display: inline'? – Harry

Тег 'h1' служит для идентификации содержимого в виде заголовка. Однако заголовок может быть в виде встроенного блока в зависимости от требований к дизайну пользователя/клиента. –

просто удалите 'display: inline' –

Попробуйте изменить display: inline; к display: inline-block;.

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

См. https://developer.mozilla.org/en-US/docs/Web/CSS/display для получения более подробной информации!

источник

2014-09-29 11:43:24

Но тогда я получу полный блок. Но я хотел бы иметь разную длину строк. Длина текста, как у текста. Так что мне нужно разбить заголовок вручную? Но тогда у меня будет возможно три раза h1. Не имеет смысла, или мне нужно добавить один h1, а остальные просто добавить собственный класс. Сложно. – Falk

А теперь я вижу проблему. Как оказалось, нет простого способа сделать это. См. Http://css-tricks.com/multi-line-padded-text/ - Мне нравится «Метод тройных элементов Мэтью Пеннелла», хотя, если вы счастливы, что не поддерживаете IE, тогда «Метод Box-decoration-break Adam Adam Campbell», лучше. –

Спасибо Олли! Этот комментарий выше был полезен! – Falk

Наряду с существующим дисплеем-инлайн:

-webkit-box-decoration-break: clone; 
box-decoration-break: clone;

Обратите внимание, что это currently not supported by IE/Edge и considered experimental - но это работает в других браузерах. Может быть, вариант!

Это довольно новый тег CSS3, который, возможно, не был доступен во время других ответов.

источник

2016-09-11 10:54:09 tsc

CSS обивка автоматический перевод строки

ответ

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