Ограничить ширину границы до ширины текста в блочном элементе

У меня есть заголовок <h2> в фиксированном с <div> (238px). Когда эта страница отображается, браузер управляет разрывами строк в заголовке, чтобы текст соответствовал ширине (238px).

Но свойство width элемента h2 все равно 238px, не имеет значения, где разрыв строки.

Я хочу установить border-bottom только под текст, а не под полную ширину элемента h2, и я не знаю, как это сделать с помощью CSS.

Вы можете видеть, что я имею в виду здесь: http://jsfiddle.net/np3rJ/2/

Спасибо

Ответы

Ответ 1

Если вы хотите использовать display: table-cell и псевдоэлементы, вы можете иметь довольно хорошее решение (с некоторыми незначительными ограничениями).

HTML не изменяется:

<div class="dossier_titre">
    <h2>Horizon 2020, nouvelles opportunités</h2>
</div>

и вы можете применить следующий CSS:

.zone_33 {
    width: 238px;
    padding: 0px;
    margin: 0px;
}

.zone_33 .dossier_titre {
    margin: 0px 0px 20px 0px;
}

.zone_33 h2 {
    color: #616263;
    font-size: 150%;
    font-weight: lighter;
    padding: 0px 0px 12px 0px;
    background: none;
    border-bottom: 1px solid grey;
    display: table-cell;
    text-transform: uppercase;
}

.zone_33 .dossier_titre:after {
    content: "";
    display: table-cell;
    width: 100%;
}

Для элемента <h2> установите display: table-cell и добавьте псевдоэлемент после .dossier_titre (содержащий блок для элемента header/title). Псевдоэлемент также является table-cell и имеет ширину 100% (это ключ).

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

Как это работает
Я создаю таблицу из двух ячеек со второй ячейкой (псевдоэлементом), имеющей ширину 100%. Это заставляет браузер вычислять ширину усадки для соответствия первой ячейке (h2), которая содержит текст заголовка. Таким образом, ширина первой ячейки минимальна для отображения текста. Нижняя граница длинна как длинная текстовая строка в текстовом блоке в ячейке таблицы.

Ограничения
table-cell не поддерживается в IE7 без взлома, но обход довольно хорошо известен и может быть найден в случае необходимости.

Если в заголовке было много коротких слов, вы можете получить разрыв строки в неожиданных местах. Вам нужно будет вставить &nbsp, чтобы сохранить определенные слова вместе по мере необходимости.

Fiddle: http://jsfiddle.net/audetwebdesign/h34pL/

Ответ 2

Я думаю, что это то, что вам нужно:

<h2><span>Horizon 2020, nouvelles opportunités<span></h2>

h2 span {
    position: relative;
    padding-bottom: 5px;
}
h2 span::after{
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 100%; 
    height: 1px; 
    border-bottom: 1px solid #000; 
    content: ""
}

Рабочая демонстрация в jsFiddle

Я использовал технику, описанную в этом ответе: Расширенный вызов CSS: подчеркните только последнюю строку текста с помощью CSS

Я ввел span в H2 чтобы не изменять его атрибут display, но вы можете также легко использовать ту же технику с display: inline на H2.

Ответ 3

Может быть, display: inline-block; Или display: inline; - это то, что вам нужно?

Ответ 4

Почему бы не попробовать:

text-decoration:underline

ИЗМЕНИТЬ

Просто создайте интервал вокруг "OPPORTUNITÉS" с подчеркиванием.

 <h2>Horizon 2020, nouvelles <span class="underline">opportunités</span> </h2>
.underline {
    text-decoration:underline
}

Ответ 5

Попробуйте это, (я думаю, это поможет вам)

.heading {
    position: relative;
    color: $gray-light;
    font-weight: 700;
    bottom: 5px;
    padding-bottom: 5px;
    display:inline-block;
}

.heading::after {
    position: absolute;
    display:inline-block;
    border: 1px solid $brand-primary !important;
    bottom: -1px;
    content: "";
    height: 2px;
    left: 0;
    width: 100%;
}

Ответ 6

Это работает на Chrome.

h2 {
   width: fit-content;
}

Ответ 7

Можно использовать свойство text-underline-position вместо table-cell и border. Упрости!

text-decoration: underline;
text-underline-position: under;