Как предотвратить разрыв слова в ячейке таблицы фиксированного расположения?

Question

Я установил на стол, но слова в каждой ячейке разбиты на новую строку.

Eg: 

Applicatio 
n 

Instead of: 

Application 

Я попробовать решение, добавив white-space: nowrap; без толка, как suggested here

Вопрос: Как предотвратить разрыв слов в фиксированной верстке ячейке таблицы?

Сервировка стола:

   <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

Применить CSS word-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>

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