CODEWITHSUNDEEP
htmlcss
Raj
Raj

Reputation: 2028

Wrap content when content size overflows the parent container

I want to wrap content when content size overflows the parent div.

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

td div{
  word-wrap: break-word;
}
<table>
  <tr>
    <td>
      <div>
              mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
              
      </div>
    </td>
  </tr>
</table>

This is not working. Why ?

Upvotes: 1

Views: 119

Answers (2)

Kiran Ghatage
Kiran Ghatage

Reputation: 407

Use 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>

Upvotes: 1

Nandita Sharma
Nandita Sharma

Reputation: 13407

Use word-break: break-all; property instead of word-wrap: break-word;.

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

td div {
  word-break: break-all;
}
<table>
  <tr>
    <td>
      <div>
        mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

Upvotes: 1

Related Questions