は、テキスト

Question

周囲に境界線のラップを持って、私は見出しの境界線は、ページ全体ですべての600個のピクセルを拡張しますが、私は言葉「タイトル」はしっかりとフィットするようにしたい、それ

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

にいくつかのテキストを持つdiv要素を持っていると仮定します内部。しかし、私はあらかじめ単語のピクセル数を知っているわけではありません。たとえば、div内に "Title"を入れて幅を明示的に設定することはできません。

領域を横切って完全には伸びていないテキストの周りに簡単にフィットする方法はありますか？

Answer 1

これは、h1がブロック要素であるため、行全体（または指定した幅）にまたがるためです。

あなたがH1に display:inlineを設定することにより、境界線がテキストのみの周りに行くことができます

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

Answer 2

あなたが望むのであれば分かりませんが、内部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 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><span style='border:2px black solid; font-size:42px;'>Title</span></h1> 
 
</div>