361

これは Javascript でかなり簡単に解決できることはわかっていますが、純粋な CSS ソリューションだけに関心があります。

テキストが常に固定 div に収まるようにテキストのサイズを動的に変更する方法が必要です。サンプルのマークアップは次のとおりです。

<div style="width: 200px; height: 1em; overflow: hidden;">
  <p>Some sample dynamic amount of text here</p>
</div>

コンテナの幅をemsで指定し、その値を継承するフォントサイズを取得することで、これが可能になるのではないかと考えていましたか?

4

14 に答える 14

119

編集: attr ()に注意してください。css のcalc()に関連しています。将来的には達成できるかもしれません。

残念ながら、今のところ CSS のみの解決策はありません。これが私があなたに提案することです。要素に title 属性を与えます。また、テキスト オーバーフローの省略記号を使用して、デザインの破損を防ぎ、さらにテキストがあることをユーザーに知らせます。

<div style="width: 200px; height: 1em; text-overflow: ellipsis;" title="Some sample dynamic amount of text here">
 Some sample dynamic amount of text here
</div>

.

.

.

または、ビューポートに基づいてサイズを縮小したい場合。CSS3は、ビュー ポートに相対的な新しい寸法をサポートします。

body {
   font-size: 3.2vw;
}
  1. 3.2vw = ビューポートの幅の 3.2%
  2. 3.2vh = ビューポートの高さの 3.2%
  3. 3.2vmin = 3.2vw または 3.2vh の小さい方
  4. 3.2vmax = 3.2vw または 3.2vh の大きい方 css-tricks.com/... を参照し、 caniuse.com /...も参照してください。
于 2014-02-24T07:51:13.680 に答える
50

calcあなたはアプローチに興味があるかもしれません:

font-size: calc(4vw + 4vh + 2vmin);

終わり。好みに合うまで値を微調整します。

ソース: https://codepen.io/CrocoDillon/pen/fBJxu

于 2017-08-24T13:59:02.277 に答える