如何防止固定布局 table 单元格中的断字？

Question

我在 table 上设置了 table-layout: fixed;，但每个单元格中的单词都被换行了。

Eg:

Applicatio
n

Instead of:

 Application

我确实尝试了添加 white-space: nowrap; 的解决方案，但无济于事 suggested here

问题： 如何防止固定布局 table 单元格中的断字？

Table布局：

             <table  id="escalation" class="table table-striped table-bordered" cellspacing="0">


                <thead>
                    <tr>
                        <th style="display:none">ID</th>
                        <th>RID</th>
                        <th>Asset Name</th>    
                    </tr>
                </thead>
                <tbody>

                        <tr>
                            <td>1</td>
                            <td class="td-limit">102345</td>
                            <td class="td-limit">Application Testing Break</td> 
                        </tr>

                </tbody>
            </table>

CSS:

#escalation {

    table-layout: fixed;
}

#escalation th {
    overflow: auto;
    font-size: 10px;
    color: #000000;
    border-right: 1px solid #7591ac;
}
.td-limit {
    overflow: auto;
    font-size: 11px;
    max-width: 220px;
    overflow: hidden;
    word-wrap: break-word;
}

Answer 1

您需要将 white-space: nowrap; 添加到您的 .td-limit

#escalation {

    table-layout: fixed;
}

#escalation th {
    overflow: auto;
    font-size: 10px;
    color: #000000;
    border-right: 1px solid #7591ac;
}
.td-limit {
    overflow: auto;
    font-size: 11px;
    max-width: 220px;
    overflow: hidden;
    word-wrap: break-word;
    white-space: nowrap;
}

<table id="escalation" class="table table-striped table-bordered" cellspacing="0">


  <thead>
    <tr>
      <th style="display:none">ID</th>
      <th>RID</th>
      <th>Asset Name</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td>1</td>
      <td class="td-limit">102345</td>
      <td class="td-limit">Application Testing Break</td>
    </tr>

  </tbody>
</table>

Answer 2

将CSSword-break:keep-all应用于单元格。

table { width:100px; border:1px solid black; }
th, td { word-break:keep-all; border:1px solid black; }

<table  id="escalation" class="table table-striped table-bordered" cellspacing="0">


                <thead>
                    <tr>
                        <th style="display:none">ID</th>
                        <th>RID</th>
                        <th>Asset Name</th>    
                    </tr>
                </thead>
                <tbody>

                        <tr>
                            <td>1</td>
                            <td class="td-limit">102345</td>
                            <td class="td-limit">Application Testing Break</td> 
                        </tr>

                </tbody>
            </table>

如何防止固定布局 table 单元格中的断字？

How to prevent word break in fixed layout table cell?

html

css

cell

word-break