Question

我正在处理的系统将以html格式生成发票和多个文档。

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

如果我在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的底部边缘。

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

1 个答案: