文字周围有边框 [英] Have border wrap around text

问题描述

假设我有一个包含一些文本的div

Suppose I have a div with some text in it

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

该标题的边框将在整个页面上延伸600像素，但我希望单词"Title"能紧紧地放在里面.但是，我不提前知道该单词有多少像素宽，因此我无法例如将"Title"放在div内并明确设置其宽度.

The border for the heading will extend all 600 pixels across the page, but I want the word "Title" to fit tightly inside. However, I don't know ahead of time how many pixels wide the word is so I can't for example put the "Title" inside a div and set its width explicitly.

是否有一种简单的方法来使边框适合未完全在整个区域水平延伸的文本?

Is there an easy way to make a border fit around text that does not fully extend horizontally across an area?

推荐答案

这是因为h1是一个块元素，因此它将跨线(或您指定的宽度)延伸.

This is because h1 is a block element, so it will extend across the line (or the width you give).

通过在h1上设置display:inline，可以使边框仅在文本周围移动

You can make the border go only around the text by setting display:inline on the h1

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

这篇关于文字周围有边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！