html預標記不顯示根據屏幕大小的多行

Question

我試圖從屏幕上打印3行文本。我使用pre標籤作爲格式。它顯示了3條獨立的行，但它從最後切割數據。請參閱下面我的代碼和屏幕截圖。

這就是它是如何在我的屏幕上： 這就是它在打印出來dispalying。 你看到它是在最後的切割線2

下面的數據是我的html代碼：

@model MaxPanda.Domain.ViewModel.PrintWorkOrderModel 
@using System.Globalization 
@using MaxPanda.Domain.ViewModel 

<style> 
    table.printTable > tbody > tr > td:first-child { 
     font-size: 17px; 
    }  
    table.printTable > tbody > tr > td:last-child { 
     font-size: 15px; 
     width: 300px; 
    }  
    pre { 
     font-size: 15px; 
     font-family: "Open Sans,1Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; 
    }  
</style> 

<table class="printTable"> 
    <tr class="printHeader">   
    <tr> 
     <td>@Html.LabelFor(model => model.Notes)</td> 
     <td><pre>@Model.Notes</pre></td> 
     @*<td>@Model.Notes</td>*@ 
    </tr>  
</table> 

可否請你看看，讓我知道如果我正確地使用預先標記？

謝謝。

Answer 1

這是pre元素的默認呈現應該做的。

設置the white-space property到pre-wrap如果你想允許換行。