在 div 中渲染 html 并调整其内容的大小

Question

我正在使用的系统将生成发票和几个 html 格式的文档。

当有人搜索此文档时，结果必须与文档的小预览一起显示。客户希望 html 文档显示在 div 中（请注意，此 div 比实际文档大小小），我想要实现的是在 div 中显示 html 并且内容自动调整为 div 的大小大小。

如果我在 div 中渲染 html，它只会添加滚动条并以原始大小显示，我希望 html 内容适合 div 的大小。

我在一个 CSS 表单中工作过，它更改了包含 div 内元素的字体、宽度、高度，但由于所有文档的 html 结构中并没有真正的模式，因此结果不是预期的那些，我想知道是否有更清洁的方法可以做到这一点，也许是使用 javascript 或 jquery 插件。

Answer 1

您可以在 div 上使用scale，它会缩小其中的所有内容。

http://www.w3.org/TR/css3-transforms/ 是所有 CSS 转换的参考。看起来有点矫枉过正，但似乎没有 W3C 页面仅解释规模。

无论如何，你可以使用的 CSS 是这样的：

.preview {
    width:600px; height:400px;
    -webkit-transform:scale(.25);
    -ms-transform:scale(.25);
    transform:scale(.25);
    -webkit-transform-origin:0 0; 
    -ms-transform-origin:0 0; 
    transform-origin:0 0; 
    border:4px solid green;
    margin:0 0 -300px 0;
}

结果看起来像http://jsfiddle.net/asxqL/4/

请注意，尽管此处大多数测量值乘以 0.25（例如，4px 边框显示为 1 像素宽），但元素占用的垂直空间仍为 400 像素。这就是 -300px 的下边距出现的地方。