jquery - CSS の裏技: 各行を小さくする

Question

Eye Chart には、文字がごちゃごちゃした行がたくさんあり、各行が小さくなって読みにくくなっているのを知っていますか? CSS でそれは可能ですか? 同様に、DIV があり、に設定されてtext-align: justifyいますが、各行を小さくしたいと思います。後続の各行などを参照する方法がわかりません。誰にもアイデアはありますか？jQueryソーサリーなどを使用したCSSを使用しない場合でも、可能である必要があります。

Answer 1

これを試してくださいhttp://jsfiddle.net/tuanderful/mQYCt/

基本的に、多数の div を相互にネストし、子セレクター>と行の高さの相対単位を使用しました。em

►CSS

div > div {
  line-height: .8em;   
  font-size: .8em;    
}

► HTML

<div>
  Foo
  <div>
    Foo
    <div>
      Foo
    </div>
  </div>
</div>​

このアプローチは、多数の div を互いに入れ子にするだけです。div > div定義により、その後にネストされるそれぞれのdiv比率は、その親よりも小さくなります。

Answer 2

いくつかの jQuery を使用したソリューション:
1) マークアップ

​<div>
    <p>This is line one</p>
    <p>This is line two</p>
    <p>This is line three</p>
    <p>This is line four</p>
    <p>This is line five</p>
    <p>This is line six</p>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

2)CSS(一番太い線のサイズ)

​div > p:first-child {
    font-size:1.8em;
}​

3)JS:

var pars = $("div p");
var size;
for (var i = 0; i < pars.length - 1; i++) {
    size = parseInt($(pars[i]).css('font-size'));
    $(pars[i+1]).css('font-size', (size*0.9+"px"));
}​

font-size をより速く小さくしたい場合は、0.9 を少し小さく変更します。

ps 作業例 - http://jsfiddle.net/BVWp4/

Answer 3

Tuanderfulは、おそらく最も簡単でブラウザと互換性のある方法を提供しましたが、さらにいくつかの方法をコンパイルしています。nth-child(#)明らかな方法の 1 つは、ここでデモを行った一連の宣言です: http://jsfiddle.net/mQYCt/2/

.parent > div:nth-child(1) {
  font-size: 30px;
}
.parent > div:nth-child(2) {
  font-size: 25px;
}
.parent > div:nth-child(3) {
  font-size: 20px;
}
...

より多くのブラウザーがcalcとcss 変数の両方を実装する場合、これはおそらく単一の宣言で実行できますが、それは少しばかりです。

私はまた、これを行うために a を使用してみました（好奇心から）counter-increment：

.parent {counter-reset: num;}
.parent div {
    counter-increment: num;
    font-size: -moz-calc( num * 10px);
    font-size: calc( num * 10px);
}

当然のことながら、これはどのブラウザーでも機能しませんでしたが、面白い考えでした。