html - WebGrid 内容列突然不换行

Question

我突然遇到了一个非常烦人的问题，我不知道它是怎么来的。

我正在使用此代码在我的 View 中生成一个表:

@{ 
    var grid = new WebGrid( Model, rowsPerPage: 100);
    var columns = new List<WebGridColumn>()
    {
        grid.Column("LeadId", FormLabels.ResourceManager.GetString("ID")),
        grid.Column("Date", FormLabels.ResourceManager.GetString("Date"),
                format: (item) => string.Format("{0:dd-MM-yyyy}", item.Date)),
        grid.Column("Location", FormLabels.ResourceManager.GetString("Location")),
        grid.Column("Name", FormLabels.ResourceManager.GetString("ContactName")),
        grid.Column("Organisation", FormLabels.ResourceManager.GetString("Organisation")),
        grid.Column("Details", FormLabels.ResourceManager.GetString("LeadDetails"))
    };
}

<div class="container">
    <h2>@Headers.ResourceManager.GetString("Opportunities")</h2>

    @grid.GetHtml(
        tableStyle: "table selectableGrid",
        alternatingRowStyle: "alternate",
        columns: columns,
        htmlAttributes: new { data_selecturl=Url.Action("Details", "lead") } )
</div>

这一直可以生成这样的表格:

但是突然间，在调试我的元素时，它现在看起来像这样:

如您所见，最后一列文本延伸到 "continer"div 之外，不再换行。

我可以确认 html 是相同的，并且在 Firefox 中检查时我看不到计算的 css 有任何差异。

我几乎 100% 确定在这开始发生之前我没有更改任何 css 规则，我知道这似乎是不可能的，但我不知道是什么原因造成的。

有没有人对我如何找到罪魁祸首或如何解决包装问题有任何建议？

谢谢

我已经尝试过的

我在 table 上设置了 table-layout:fixed，但这将所有列固定为相同的宽度，所以这不是问题。

html

1.

<div class="container">

    <h2>Opportunities</h2>

        <table class="table selectableGrid" data-selecturl="/en-US/lead/Details">
    <thead>
        <tr>
            <th scope="col">
<a href="/en-US/Lead?sort=LeadId&amp;sortdir=ASC">ID</a>            </th>
            <th scope="col">
<a href="/en-US/Lead?sort=Date&amp;sortdir=ASC">Date</a>            </th>
            <th scope="col">
<a href="/en-US/Lead?sort=Location&amp;sortdir=ASC">Location</a>            </th>
            <th scope="col">
<a href="/en-US/Lead?sort=Name&amp;sortdir=ASC">Contact Name</a>            </th>
            <th scope="col">
<a href="/en-US/Lead?sort=Organisation&amp;sortdir=ASC">Organisation</a>            </th>
            <th scope="col">
<a href="/en-US/Lead?sort=Details&amp;sortdir=ASC">Details</a>            </th>
        </tr>
    </thead>
    <tbody>
        <tr>    
            <td>7</td>
            <td>20-09-2017</td>
            <td>testerton</td>
            <td>testy mcgee</td>
            <td>test llc</td>
            <td>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </td>
        </tr>
        <tr class="alternate">
            <td>8</td>
            <td>20-09-2017</td>
            <td>testerton</td>
            <td>testy mcgee</td>
            <td>test llc</td>
            <td>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </td>
        </tr>
    </tbody>
    </table>

</div>

2.

<div class="container">
    <h2>Opportunities</h2>

        <table class="table selectableGrid" data-selecturl="/en-US/lead/Details">
    <thead>
        <tr>
            <th scope="col">
<a href="/en-US/Lead?sort=LeadId&amp;sortdir=ASC">ID</a>            </th>
            <th scope="col">
<a href="/en-US/Lead?sort=Date&amp;sortdir=ASC">Date</a>            </th>
            <th scope="col">
<a href="/en-US/Lead?sort=Location&amp;sortdir=ASC">Location</a>            </th>
            <th scope="col">
<a href="/en-US/Lead?sort=Name&amp;sortdir=ASC">Contact Name</a>            </th>
            <th scope="col">
<a href="/en-US/Lead?sort=Organisation&amp;sortdir=ASC">Organisation</a>            </th>
            <th scope="col">
<a href="/en-US/Lead?sort=Details&amp;sortdir=ASC">Details</a>            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>7</td>
            <td>20-09-2017</td>
            <td>testerton</td>
            <td>testy mcgee</td>
            <td>test llc</td>
            <td>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </td>
        </tr>
        <tr class="alternate">
            <td>8</td>
            <td>20-09-2017</td>
            <td>testerton</td>
            <td>testy mcgee</td>
            <td>test llc</td>
            <td>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </td>
        </tr>
    </tbody>
    </table>

</div>

Answer 1

这里的问题实际上是其中一行在 Details 列中包含一个很长的字符串，没有空格。

这是拉伸(stretch)该行的列，并对所有其他行执行相同的操作。

我可以用

来解决这个问题

table td {
    word-wrap: break-word;
    word-break: break-all
}

但这会导致其他行缩小到标题行的大小，这意味着日期显示为:

01-0
1-20
00

所以为了解决这个问题，我只将它应用到最后一列

table tr td:last-child {
    word-wrap: break-word;
    word-break: break-all
}

恼人的是，这在 Edge 或 Chrome 中似乎不起作用，日期列仍然像上面那样中断。