Оберните текст в div при превышении ширины

Question

У меня есть таблица, в которой у меня 3 столбца. В первом столбце указаны имя и отчет (т. Е. Как в скрипте ACT TSK REM и т. Д.). Второй и третий столбцы имеют некоторый текст для отображения.

У меня была настройка ширины для div с классом «EmployeeReportsLinks» и попытка обернуть текст, но он не работает. «W» из «NAW» идет во второй строке.

Просьба предложить мне решение для гольба.

Вот мой HTML

<table> 
<tr> 
    <td id="tdfirst" valign="top" style="min-width: 250px; width: auto; text-align: left; padding-left: 5px; padding-top: 5px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(248, 248, 248); height: 68px;">Hello TD1 
     <div class="EmployeeReportsLinks" style="width: 200px;display: block; word-wrap: break-word;">ACT&nbsp;TSK&nbsp;REM&nbsp;SAL&nbsp;AFE&nbsp;NAW&nbsp;AW&nbsp;IG&nbsp;CPP&nbsp;COG&nbsp;LS&nbsp;PRE&nbsp; 
     </div> 
    </td> 
    <td class="tdsecond" valign="top" style="min-width:485px;text-align:left;padding-left:5px;padding-top:5px;border-bottom:1px solid #F8F8F8;">Hello TD2</td> 
    <td align="right" valign="top" style="min-width:270px;padding-right:5px;padding-top:5px;border-bottom:1px solid #F8F8F8;">Hello TD3</td> 
</tr> 

Вы можете найти рабочий пример здесь JS Fiddle

Answer 1

ваши слова оберточной потому что у вас есть стиль: word-wrap: break-word; на вашем .EmployeeReportsLinks

Вы может удалить этот стиль и все незавершенные пробелы, которые вы ввели ( ) или добавить что-то вроде

.EmployeeReportsLinks > * {white-space:nowrap;} 

но этот вид отрицает необходимость (второй вариант word-wrap: break-word;

http://jsfiddle.net/2eRT9/5/)