无论父级如何,强制DIV包装文本

时间:2013-04-16 03:15:22

标签: html css overflow

所以我将div埋在固定的桌子里。我在word-wraptd元素上有一些div和其他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屏幕截图: enter image description here

1 个答案:

答案 0 :(得分:0)

解决。最后,<pre>插件添加了highlight.js个标签。