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是一个块元素，所以它会延伸到整个行（或你给出的宽度）。

您可以通过在h1

上设置display:inline来使边框仅在文本周围移动

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

Answer 2

尝试将其放入span元素中：

＆＃13;

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

＆＃13;

Answer 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没有正确地将我的代码示例解释为块，所以我不得不使用内联代码方法。

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

Answer 5

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

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

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

边框环绕文字

5 个答案: