当内容大小溢出父容器时包装内容

Question

我要在内容大小超出父div时包装内容。

td{
  background: pink;
  width:20px;
}

td div{
  word-wrap: break-word;
}

<table>
  <tr>
    <td>
      <div>
              mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
              
      </div>
    </td>
  </tr>
</table>

这不起作用。为什么？

Answer 1

使用b属性代替word-break: break-all;。

word-wrap: break-word;

td {
  background: pink;
  width: 20px;
}

td div {
  word-break: break-all;
}

Answer 2

使用word-break: break-all;

td{
  background: pink;
  width:20px;
}

td div{
word-break: break-all;
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -o-pre-wrap; /* Opera 7 */
    white-space: pre-wrap;  /* CSS 2.1 */
white-space: pre-line; /* CSS 3 */
word-wrap: break-word; /* IE */
}

<table>
  <tr>
    <td>
      <div id= "mydiv">
              mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
              
      </div>
    </td>
  </tr>
</table>