Question

我们的构建软件具有一个Web界面，可使用表格报告构建状态。当构建处于挂起状态时，它会在内部表中输出最后一条日志消息。这些日志消息可能非常非常长。

这是HTML发布的简化版本：

<html>
<head>
</head>
<body>
    <table id="StatusGrid" class="SortableGrid">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
    </tr>
    <tr class="buildstatus">
        <td colspan="11">
            <table>
            <tr>
                <td>hello</td>
                <td>...........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................</td>
            </tr>
            </table>
        </td>
    </tr>
    </table>
</body>
</html>

如果在浏览器中显示此HTML，则必须垂直滚动才能查看表格的全部内容。我不想要这个。我从不希望表格扩展到浏览器窗口的垂直宽度之外。我不介意截断/剪切内表中的超长文本。

我尝试了word-break: break-all，但这仅适用于Chrome。 我必须支持IE 9以及最新版本的Chrome和Firefox。

最后的皱纹：我必须使用CSS来解决这个问题。我只能访问应用程序的样式表，而不能访问HTML。

你怎么看？可能的？

Answer 1

尝试在td上设置固定高度并将其溢出或溢出y设置为隐藏;

tr.buildstatus td{
   height: 500px;
   width: 600px;
   overflow:hidden; /* or overflow-y:hidden; */
}

Answer 2

这对你有用。您可能需要根据自己的喜好调整高度/宽度。

tr.buildstatus tr td + td {
    height:100px;
    width:200px;
    overflow:hidden;
}
table {
    table-layout:fixed;
    width:600px;
    height:200px;
}

实例：http://jsfiddle.net/R8nmk/

Answer 3

尝试overflow: hidden。
溢出被剪切，其余内容将不可见有关溢出here的更多信息。

如何防止包含长文本的表的垂直滚动？

3 个答案: