CSS Trickery：讓每一行更小

Question

你知道眼睛圖表有很多混亂的字母，每行越來越小，很難閱讀，這是可能的與CSS？就像，我有一個DIV，它被設置爲text-align: justify，但我想讓每一行更小。我不知道如何引用每個後續行或任何東西。有人有主意嗎？它必須是可能的，如果沒有CSS與一些jQuery巫術或其他。

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")); 
}​ 

如果你想更快地減小字體大小 - 將0.9改爲更小

p.s.工作示例 - http://jsfiddle.net/BVWp4/

Answer 3

Tuanderful給出了可能是最簡單和大多數瀏覽器兼容的方法，但我正在編譯幾個。一個顯而易見的方法是一系列nth-child(#)聲明我已經演示版在這裏：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 variables這也許可以用一個單一的聲明做了，但它是一個小的方式關閉。

我也試過（只是出於好奇）使用counter-increment做到這一點：

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

毫不奇怪，這並沒有在任何瀏覽器工作，但它是一個有趣的想法。