Force DIV для обертывания текста, независимо от его родителя

Question

Итак, у меня есть div, похороненный в фиксированном столе. У меня есть word-wrap и другие msic CSS на td и div элементов. Однако, когда я добираюсь до своего ребенка div, я хочу игнорировать все наследование и обернуть текст без нарушения слова.

#row4 td > div, textarea{ 
    height: 100%; 
    width: 100%; 
    border: 1px solid #C8C8C8; 
    overflow: auto; 
    padding: 5px; 
    border-radius: 5px; 
    white-space: pre; /* needed for Chrome to maintain tabs, spaces, etc */ 
} 
#div_contents{ 
    display: inline-block; 
    white-space: normal; 
    word-wrap: normal; 
} 

.

<tr id="row4"> 
    <td> 
     <div id="div_search_results" class="results" ></div> 
    </td> 
    <td> 
     <div id="div_contents"></div> 
     <textarea id="ta_contents"></textarea> 
    </td> 
</tr> 

Это вызывает переполнение баров и не завершает мой контент. Однако, если я использую word-wrap: break-word;, я получаю завернутый контент, но он ломается внутри слова.

Независимо от родительских блоков, разрывов, оберток и т. Д., Я не могу переопределить мой дочерний div для обычного обернутого текста?

Вот скриншот CSS из Chrome:

Answer 1

Решенный. Это привело к тому, что теги <pre> добавлены из дополнения highlight.js.