如何縮小div的內聯樣式？

Question

從HTML編輯器，用戶可以寫賀文，例如，源代碼將是：

<p style="text-align:center"> 
    <span style="font-size:20px"> 
    <span style="font-family:tahoma,geneva,sans-serif">Hej,</span> 
    </span> 
</p><br><br> 
<p style="text-align:center"><span style="font-size:20px"> 
    <span style="font-family:tahoma,geneva,sans-serif"> 
    <span style="color:#FF0000"><em>Du&nbsp;</em></span> 
    <strong>kan skrive</strong>&nbsp; 
    <span style="color:#0000CD"><u>din hilsen</u></span> her!</span> 
    </span> 
</p> 

巫婆從

翻譯，當他們點擊綠色大「保存」 按鈕，我展示一個簡單的預覽如

我的問題是，預覽是不是propotional什麼將被打印，我不能seam使用任何CSS風格包裝<div>圍繞該文本，以顯示它在預期中多一點點...

我想縮小25％......有無論如何我能做到這一點？

Answer 1

CSS3

#class:target{  -webkit-transform: scale(0.25); 
-moz-transform: scale(0.25); 
-o-transform: scale(0.25); 
-ms-transform:scale(0.25); 
transform:scale(0.25); } 

http://jsfiddle.net/s26cm/

Answer 2

提示：代替px可以使用%如果字體大小將被相應地縮放，以它的相對的元件，否則em如果它需要被相應地縮放到整個頁面的字體大小，同時縮小div，縮小相應的字體

12pt = 16px = 1em = 100%這可能來方便更改字體大小單位

分配id或class到該div並使用這些作爲腳本選擇改變保存按鈕後的尺寸被點擊時，它將覆蓋內聯樣式，你可以發佈小提琴先生？

Answer 3

「如何縮小帶有內聯樣式的div？」

你的意思是：

display: inline; 

如果你這樣做 - 任何設置爲顯示內嵌不會接受width屬性。 切換到內嵌塊;