アイコンが付いた簡単なHTMLボタンと、以下の説明があります。最小幅を使用したアイコンとテキストのボタン
<div class="mybtn">
<div><img src="someimage.png"></div>
<div>Button description</div>
</div>
このボタンの幅を最小限に抑えるためにCSSを使用することは可能ですか？画像よりも広い場合は説明が折り返されますか？説明は画像の下に水平に中央に配置する必要があります。
結果はhttps://jsfiddle.net/c3trL3ha/のようになりますが、 "mybtn"の幅は定義されていません。ご覧のとおり、「mybtn」は可能な限り狭いです。
あなたはこのように、.mybtn > divにwidthとword-wrap: break-wordを適用することができます。
.mybtn > div {
width: 32px;
word-wrap: break-word;
}
.mybtn img {
width: 100%;
height: auto;
}
注：コメントで言ったように、それは、ユーザーエクスペリエンス（UX）の局面において提案されていない単語として複数の行に分かれています。
画像は32x32ピクセルです。私は画像の幅を定義するものが解決するのを見ません。ボタンはできるだけ狭くする必要があります。 – stefan
更新された回答を確認してください。 'word-wrap：break-word'の使用を検討するべきです。ただし、ユーザーエクスペリエンス（UX）の側面では、単語が複数の行に分割されるため、提案されていません。 – Raptor
私は言葉を分けたくありません。ボタンの幅は、Max（画像幅、最長の単語長）にする必要があります。あなたは私の更新された答えがどのように見えるかを見ることができます。もちろん、テキストはボタンごとに異なります。 – stefan
チェックthisフィドル
CSS
.mybtn{
width: 200px;
}
.mybtn div {
word-wrap: break-word;
text-align: center;
width: auto;
}
あなた 'mybtn'に' MAX-width'を使用してみてください。 – Huelfe