强制 DIV 换行，无论父级如何

Question

所以我有一个div 埋在一张固定的桌子上。我在td 和div 元素上有一些word-wrap 和其他msic CSS。但是，当我找到我的孩子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 以获得正常的换行文本吗？

这是来自 Chrome 的 CSS 屏幕截图：

Answer 1

已解决。这最终是从highlight.js 插件添加的<pre> 标签。