【WordPress】改行しても囲い枠内にピッタリ文字が納まった時のまとめ!

display:inline-block;でテキストの長さに合わせる

一行に連続した文字を入力した場合以下のようにdisplay: inline-block;をCSで指定すると以下のように自動で枠が広がっていくのですが

 

これはfukidashi1のサンプルです。改行はしてないのでピッタリと枠内に納まってますね

 

改行すると下のように右側に空白ができてしまいます。

これはfukidashi1のサンプルです。
ここで改行してます。
右に余白ができてしまいますね

 

labelに文字を表示する

 

そこで試したのが”label”に文字を表示させることです。
これは以前アコーディオンみたいなのを作っていた時に文字と枠の間に空白ができないのが記憶の片隅に残っていてこれは試す価値ありだな!!・・・と思い試してみました!
参考にさせて頂いたサイトは、[CSS]可変するレイアウト幅の最大値を制限する簡単な方法 です。ありがとうございました。

 

するとこれは通常と同じ表示なのですが

 

改行した時以下のように、右側にあった空白がなくなっていました。

 

もっとわかりやすく表示すると

↓こんな感じです。↓

これはfukidashi1のサンプルです。改行はしてないのでピッタリと枠内に納まってますね

 

Excel
Word
PowerPoint

 

 

 

文字数が少ないとわかりやすいですね!

にほんブログ村 IT技術ブログ WordPressへにほんブログ村 IT技術ブログへ