如何阻止塊流動，使它們截斷

我只有原始的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>

來源

2017-05-19 Display name

嘗試將它只能與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>

來源

2017-05-19 19:55:04

這令它從包裝格式化爲一個表。很好，但我失去了利潤。 –

然後在'.td'中添加邊距或設置高度和寬度。 –

如果「邊界崩潰：崩潰」，效果會更好。被刪除，並且「.Address」「margin-XXX」值被替換爲「padding-XXX」。隨着這些變化，它完美的作品。謝謝。 –

如何阻止塊流動，使它們截斷

回答

相關問題