Question

我只有原始的html和css可用。没有额外的框架，但这应该足够了。

打印的发票必须包含显示在明信封窗口中的退货和收件人地址。打印时我通常使用的是什么。但是，如果用户缩小浏览器，则右手阻止左侧块下方的流动。我想要的是截断。是的，我知道我所拥有的通常是预期的效果。但是用户认为，因为页面项目现在显示不同，所以它们将像那样打印。我厌倦了解释印刷和观看的不同。

我已尝试很多关于该主题的不同小提琴，但似乎没有一个对我有用。显然我不太了解CSS。我基本上需要4个显示区域，这些区域在2x2网格中的固定位置打印。每行中的行数可能会有所不同**。如果宽度使得它们不显示，则右手项应截断。

左侧的项目必须点击打印页面上的特定位置，以便在信封窗口中显示返回和收件人地址。是的，[PracticeName]显示两次。

**加分！由于我控制html生成，我可以控制文本，因为我知道有多少个字符和行会抛出空格，我只需要根据需要截断文本。但是，如果有办法确保每个区块都可以为我做这件事，我将非常感激。

<html>
  <head>
    <style>
@page
{
    size:auto;margin:0;
}
footer
{
    page-break-before:always;
}
.EnvelopHeader
{
    padding-top:12pt;
}
.Address
{
    font:12Pt Arial;
    margin-top:48pt;
    margin-left:72pt;
    height:4em;
}
.left
{
    width:3.5in;
    float:left;
}
.right
{

}
    </style>
  </head>
  <body>
  <div class="EnvelopHeader">
    <div class="Address">
      <div class="left">
        <div>[PracticeName]</div>
        <div>[PracticeAddress1]</div>
        <div>[PracticeAddress2]</div>
        <div>[PracticeCityStateZip]</div>
      </div>
      <div class="right">
        <div>[PracticeName]</div>
        <div>[PracticePhoneNumber]</div>
      </div>
    </div>
    <div class="Address">
      <div class="left">
        <div>[PatientName]</div>
        <div>[PatientAddress1]</div>
        <div>[PatientAddress2]</div>
        <div>[PatientCityStateZip]</div>
      </div>
      <div class="right">
        <div>[PaymentReceipt]</div>
        <div>[PaymentDate]</div>
        <div>[PaymentType] #[ReferenceNumber]</div>
        <div>[PaymentAmount]</div>
      </div>
    </div>
    </div>
  </body>
</html>

Answer 1

尝试使用CSS

将其格式化为表格

<html>
    <head>
        <style>
            @page {
                size:auto;margin:0;
            }
            .EnvelopHeader {
                padding-top:12pt;
            }
            .Address {
                font:12Pt Arial;
                margin-top:48pt;
                margin-left:72pt;
                height:4em;
            }

            .table {
                display: table;
                border-collapse: collapse;
            }
            .tr {
                display: table-row;
            }
            .td {
                display: table-cell;
            }
        </style>
    </head>
    <body>
        <div class="EnvelopHeader table">
            <div class="tr">
                <div class="Address td">
                    <div>[PracticeName]</div>
                    <div>[PracticeAddress1]</div>
                    <div>[PracticeAddress2]</div>
                    <div>[PracticeCityStateZip]</div>
                </div>
                <div class="Address td">
                    <div>[PracticeName]</div>
                    <div>[PracticePhoneNumber]</div>
                </div>
            </div>
            <div class="tr">
                <div class="Address td">
                    <div>[PatientName]</div>
                    <div>[PatientAddress1]</div>
                    <div>[PatientAddress2]</div>
                    <div>[PatientCityStateZip]</div>
                </div>
                <div class="Address td">
                    <div>[PaymentReceipt]</div>
                    <div>[PaymentDate]</div>
                    <div>[PaymentType] #[ReferenceNumber]</div>
                    <div>[PaymentAmount]</div>
                </div>
            </div>
        </div>
    </body>
</html>

如何阻止块流动以便它们截断

1 个答案: