0

次のようなhtmlがあります。

<div id="prizeCategory" class="category">Applications</div>

カテゴリ CSS クラスは次のとおりです。

.category {
    display: inline-block;
    font-family: Consolas, sans-serif;
    font-size: 2em;
    color: Orange;
    max-width: 180px;
}

HTML のこのセクションを最大幅に維持したいので、 #prizeCategory値 (上記の例では「アプリケーション」) のワードラップを有効にしましたが、最大幅を追加したため、「アプリケーション」に切り捨てられます。

複数の単語がある場合は単語を折り返す値が必要ですが、それ以外の場合はその最大幅を無視して完全な値を表示します。IOW、「Application」の値は「Application」の全文を 1 行で表示する必要がありますが、「Applied History」の値は次のように 2 行で表示する必要があります。

Applied
History

IOW、ほとんどの hmtl5 セクションは同じ幅になりますが、「prizeCategory」要素の値として長い単一の単語を収容するために一部は長くなります。

#prizeCategory 要素の値の長さを毎回カウントし、その長さに基づいていくつかのプロパティを変更したり、別のクラスを使用したりする必要があるのでしょうか (「内部メディア クエリ」のようなものです)。

jsfiddle はこちら: http://jsfiddle.net/clayshannon/zhTNS/1/

4

2 に答える 2

2

JQuery を使用できます。

    $(function () {
      while ($('.category span').width() > $('.category').width()) {
        $('.category span').css('font-size', (parseInt($('.category span').css('font-size')) - 1) + "px");
      }
    });

更新された HTML:

<div id="prizeCategory" class="category"><span>Applications</span></div>

<span>コードにa を追加しました。

実際の例

于 2013-07-08T18:21:53.897 に答える