边框环绕文字

Question

假设我有一个带有一些文本的div

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

标题的边框将扩展页面上的所有600个像素,但我希望单词"Title"紧密贴合在里面.但是,我不知道这个词的宽度是多少像素,所以我不能将"标题"放在div中并明确设置其宽度.

有没有一种简单的方法可以使文本边框适合不完全水平延伸到某个区域？

Answer 1

这是因为它h1是一个块元素,因此它将延伸到整个行(或您给出的宽度).

您可以通过设置display:inlineh1 使边框仅在文本周围移动

示例:http://jsfiddle.net/jonathon/XGRwy/1/

Answer 2

尝试将其放在span元素中:

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

Answer 3

试试这个，看看你是否达到了你的目标：

<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>

Answer 4

最简单的方法是使显示成为内联块

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

如果你这样做它应该可以工作