html pre标签未根据屏幕大小显示多行

Question

我正在尝试从屏幕上打印3行文字。我使用pre标签作为其格式。它显示3条单独的线，但它从末端切割数据。请看下面我的代码和屏幕截图。

这就是我的屏幕上的情况： 这是打印出来的不一致。 你看到它正在第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。