【html/CSS】枠の幅(width)を文字数に合わせる方法

divで文字を囲っても文字数に関係なく横幅いっぱいになってしまいます。

「右のスペースが無駄だから文字数に合わせて幅を狭くしたい！」

htmlやCSSで枠の幅(width)を文字数など中身に合わせる方法を解説します。

【方法1】display:inline-block

「display:inline-block」を指定すると文字数など中身に合わせた最小の横幅になります。

<style>
.example{
    /*コレ*/display: inline-block;
    border: 1px solid #333;
    padding: 5px;
    background: #f2f2f2;
    margin: 5px 0;
}
</style>
<div class="example">中身の文字</div><br>
<div class="example">もう少し多いテキスト</div><br>
<div class="example">中身が文章などで長文のときは横幅いっぱい中身が文章などで長文のときは横幅いっぱい中身が文章などで長文のときは横幅いっぱい中身が文章などで長文のときは横幅いっぱい</div>

inline-blockはblock要素とinline要素の両方の特徴をもった要素です。

要素が連続で並んだり、中身に合わせて幅が決まるという点はinlineの特徴です。そのため改行にはbrなどが必要です。

inlineのままだとうまく効かないpaddingやmarginなど指定できるのはblockの特徴です。

CSS displayについて詳しくはこちら↓

【方法2】width:fit-content

「width:fit-content」を指定すると文字数など中身に合わせた最小の横幅になります。

<style>
.example2{
    /*コレ*/width: fit-content;
    border: 1px solid #333;
    padding: 5px;
    background: #f2f2f2;
    margin: 5px 0;
}
</style>
<div class="example2">中身の文字</div>
<div class="example2">もう少し多いテキスト</div>
<div class="example2">中身が文章などで長文のときは横幅いっぱい中身が文章などで長文のときは横幅いっぱい中身が文章などで長文のときは横幅いっぱい中身が文章などで長文のときは横幅いっぱい</div>

widthは横幅を指定するCSSです。

その値を「fit-content」にすると子要素に合わせて最小幅になります。

「display:inline-block」の方法と比べ、brが不要になります。

ただし、「fit-content」はIEでは効きません。

【方法3】table

CSSを使わずhtmlだけで実現したいならこちらの方法です。

table,tdも文字数など中身に合わせた最小の横幅になります。

中身の文字

<table border="1">
    <tr>
        <td>中身の文字</td>
    </tr>
</table>

基本的にtableは表でしか使ってはいけないため非推奨です。

WordPressなどのCMS内でクラスを付けるのが難しく、なんとかしたいときの苦肉の策です。

【まとめ】幅を文字数に合わせる方法

• display:inline-block
• width:fit-content（IE非対応）
• table（非推奨）

以上、htmlやCSSで枠の幅(width)を文字数など中身に合わせる方法でした。