Оболочка вокруг текста

Предположим, что у меня есть div с некоторым текстом в нем

<div id='page' style='width: 600px'>
  <h1 style='border:2px black solid; font-size:42px;'>Title</h1>
</div>

Граница для заголовка будет расширять все 600 пикселей на странице, но я хочу, чтобы слово "Заголовок" было плотно вставлено внутри. Тем не менее, я не знаю заранее, сколько пикселей в ширину это слово, поэтому я не могу, например, поместить "Заголовок" внутри div и явно указать его ширину.

Есть ли простой способ сделать границу подходящей для текста, которая не полностью расширяется горизонтально по всей области?

Ответ 1

Это потому, что h1 является блочным элементом, поэтому он будет расширяться по линии (или ширине, которую вы даете).

Вы можете сделать границу только вокруг текста, установив display:inline на h1

Пример: http://jsfiddle.net/jonathon/XGRwy/1/

Ответ 2

Попробуйте поместить его в элемент span:

<div id='page' style='width: 600px'>
  <h1><span style='border:2px black solid; font-size:42px;'>Title</span></h1>
</div>

Ответ 3

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

Решение 1

<div id="page" style="width: 600px;">
    <div id="title" style="display: inline; border...">Title</div>
</div>

Решение 2

<div id="page" style="width: 600px;">
    <span id="title" style="border...">Title</span>
</div>

Изменить: Странно, SO неправильно интерпретирует мои примеры кода как блок, поэтому мне пришлось использовать встроенный код-метод.

Ответ 4

Попробуйте это и посмотрите, получаете ли вы то, к чему вы стремитесь:

<div id='page' style='width: 600px'> <h1 style='border:2px black solid; font-size:42px; width:fit-content; width:-webkit-fit-content; width:-moz-fit-content;'>Title</h1> </div>