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如果你想允许换行。