CSS、すべてのdivの幅をテキストで埋めてください

文字間のスペースを自動的に変更する方法。テキストをdivの幅全体に渡したいですか？テキストは静的ではありません。（必ず、テキストを変更し、... 123" または『テキストテキスト』することができます）CSS、すべてのdivの幅をテキストで埋めてください

<style type="text/css"> 
    #menu{ 
     width: 200px; 
     background-color: #000; 
     color: #336699; 
     font-size: 16px; 
     letter-spacing: 100%; 
    } 
    </style> 
<body> 
<div id="menu"> 
    tekstas 
</div>

出典

2010-12-02 lolalola

JamWafflesに対する無礼を意味するものではありませんが、真剣に（最初は）間違っていて、解決策に近づいていない回答は、どのように受け入れられ、5つのupvotesが得られますか？ ... –

EDIT：残念ながら、これはのみ単語間隔、ない手紙間隔を変更し実行する方法がありません。 CSSでカーニングおそらくCSS3、しかし

をこれは簡単にtext-align: justify CSS属性を使用して実現されます。

#menu 
{ 
     width: 200px; 
     background-color: #000; 
     color: #336699; 
     font-size: 16px; 
     text-align: justify; 
}

出典

2010-12-02 11:00:19 Bojangles

justifyは文字間隔ではなく単語間隔を処理します – ArK

Ooops！そこに私の謝罪。私は返信で少し急いでいました>たたきつけ< – Bojangles

また、別の行が続く行にのみ影響します。 –

nがありますこれを純粋にCSSで行う方法。 letter-spacing属性はパーセント値を使用しません。 text-align: justifyは、フォントカーニングではなく、単語間のスペースにのみ影響し、別の行が続くテキスト行にのみ適用されるため、機能しません。

divの文字数を数えることでJSを試してから、幅を埋めるように文字間に必要なスペースを計算することができますが、このソリューションはモノスペースフォント（すべての文字に対して同じ幅を持つフォント）。

出典

2010-12-02 11:00:52

'letter-spacing'はピクセル値で動作しますか？（つまり、固定されていればdivの幅ですか？） – Bojangles

はい、 'letter-spacing'はピクセル値で動作しますが、文字の間に宣言された値を追加するか、負の値が与えられた場合はそれを減算します。 –

-2

解決策は誰にとってもうまくいきませんが、それは私の問題を解決するために判明しました。見出しのテキストを短く表示すると、すべての単語「L ikethis」のすべての文字の間にスペースを入れることができます。

私の特定の設計では、これはうまく見えますが、もちろんalign: justifyはdiv内で完全にその魔法を実行できます。

出典

2015-02-26 14:16:09

CSS、すべてのdivの幅をテキストで埋めてください

答えて

関連する問題