1

我已经 table-layout: fixed;在一张桌子上设置了一个，但每个单元格中的单词都被分成了一个新行。

Eg:

Applicatio
n

Instead of:

 Application

我确实 按照这里的建议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>

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;
}
4

2 回答 2

3

将 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>

于 2017-02-21T22:59:35.637 回答
2

您将需要添加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>

于 2017-02-21T22:56:34.373 回答