1

我试图动态创建 html，然后将自身作为 iframe 注入 jquery 以打开带有分页符的打印窗口。

我收到一个包含 id 列表的会话变量。对于每个我想创建一个块：

<div class="card">
    <div class="top-center">
        <div class="first-line">
            some text
        </div>
        <div class="second-line">
            some text
        </div>
        <div class="second-line">
            some text
        </div>
    </div>
    <div class="bottom-center">
        <div class="first-line">
            some text
        </div>
        <div class="second-line">
            some text
        </div>
        <div class="second-line">
            some text
        </div>
    </div>
</div>

我正在使用的 JQuery 插件是：http ://www.position-absolute.com/creation/print/ 。

我想要做什么：将文本旋转 90°

*
{
    margin: 0px;
    padding: 0px
}
.card { 
    -webkit-transform: rotate(90deg);
    page-break-after:always;
    /* this is taken from w3schools*/
    margin-left:auto;
    margin-right:auto;
    width: 70%;
}

我想您可以将其视为横向页面然后我想要的是当您将头部倾斜所需的 90° 时，顶部中心是左侧，底部中心是右侧，因为您将通过短边折叠每一页.

在垂直和水平旋转后，每个 div 底部/顶部都应该死在页面中间。

我如何使用 css 获取上述页面设置

应该看起来像这样：http: //goo.gl/lNP8J

4

1 回答 1

7

为了旋转内容，首先，您需要设置transform-origin应该用作旋转中心的点。您可能还必须为旋转的元素提供以 px 或 em 为单位的固定宽度（当我尝试以 % 为单位的宽度时，它似乎效果不佳）。并且一定要使用全范围的选择器前缀transform来transform-origin支持不同的浏览器。

类似于以下内容：

-webkit-transform-origin: 0 0;
-moz-transform-origin:    0 0;
-ms-transform-origin:     0 0;
transform-origin:         0 0;

-webkit-transform: rotate(90deg);
-moz-transform:    rotate(90deg);
-ms-transform:     rotate(90deg);
transform:         rotate(90deg);

编辑：

这是一个简化版本，可能会让您更接近。在下面的 CSS 中，我为内容设置了固定宽度（在本例中为 400 像素），并强制旋转内容的顶部和左侧间距为 100 像素。在此示例中，我没有尝试将内容居中，但可以通过编辑 CSS 来调整位置（使其看起来更居中）。这不涉及多页打印（尤其是如何使用旋转内容），但希望这是朝着正确方向迈出的一步：

.card {
    width: 400px;
    background-color: #eee;  /* Temporary bg color, for testing */

    -webkit-transform-origin: 0 0;
    -moz-transform-origin:    0 0;
    -ms-transform-origin:     0 0;
    transform-origin:         0 0;

    -webkit-transform: translate(100px, 500px) rotate(-90deg);
    -moz-transform:    translate(100px, 500px) rotate(-90deg);
    -ms-transform:     translate(100px, 500px) rotate(-90deg);
    transform:         translate(100px, 500px) rotate(-90deg);
}

这是一个jsfiddle 演示。在翻译函数中，500px是400px宽度加上100px顶部间距。根据需要调整宽度和translate()值以进行试验。

您可能必须避免使用 % 作为内容的宽度或高度（或者至少，如果您可以避免这样做，它可能会简单得多）。

于 2012-07-02T14:30:35.323 回答