CSS：テキストの長さに応じて可変フォントサイズ

Question

font-sizeパラメータをテキストの長さによって変えることはできますか？ もちろん、これはJavaScriptでも可能ですが、私はしたくありません。 ;）

私は140pxの幅と高さを持つボックスを持っています。コンテンツは100px w + h（ボックスのパディング：20px）にする必要があります。私のテキストはこの100ピクセル幅のものを使うべきです。また、ページのテキストの変更（AJAX）では、テキストはwidth = 100pxに割り当てる必要があります。

これは可能ですか？

Answer 1

テキストの長さを事前に知っている場合は、CSSの画面サイズに基づいてメディアクエリを設定して、それに従ってフォントサイズを調整することができます。

@media (max-width: 367px) { 
    .myContainer { 
    font-size: 8px; 
    } 
} 
@media (min-width: 368px) and (max-width: 1024px) { 
    .myContainer { 
    font-size: 12px; 
    } 
} 
@media (min-width: 1025px) { 
    .myContainer { 
    font-size: 16px; 
    } 
} 

あなたが動的にサーバー側の技術でテキストを生成している場合は、あなたのテキストの長さを見ることができるとサイズにフォント適切なクラスを設定する必要があります。

// Example pseudo-code to illustrate the point... 
int len = myText.length(); 
if (len > 2000) { 
    setOutputClass("smallestSize"); 
} else if (len > 1000 && len < 2000) { 
    setOutputClass("mediumSize"); 
} else { 
    setOutputClass("largestSize"); 
} 

そして、それが対応するとしあなたのCSSのクラスのルールは：

.smallestSize { 
    font-size: 8px; 
} 

.mediumSize { 
    font-size: 12px; 
} 

.largestSize { 
    font-size: 16px; 
} 

私は、CSS内のテキストの長さを決定する方法がないかなり確信しているので、最終的には、JavaScriptやapproacを使用するように強制することができます少し違っています。