word-wrap: break-word; not working vertically

Question

see a functional example in this jsfiddle

the text: "text should be broken" it is not breaking and respecting the space of td.

Thank you.

Answer 1

And it’s not working horizontally either, so the problem isn’t with transform, but the lack of width, since the element is a <p> within a td you can use width: 100%;

It is important note that text leaks due to its negative margins

See the tests:

 p.horizontal
 {
     margin-left: -50px;
     margin-right: -50px;
     color: rgb(166,166,166);
     font-size: 18px;
     word-wrap: break-word;
     font-family: Arial;
     width: 100%;
 }


 p.vertical
 {
     margin-left: -50px;
     margin-right: -50px;
     transform: rotate(-90deg);
     -webkit-transform: rotate(-90deg); /* Safari/Chrome */
     -moz-transform: rotate(-90deg); /* Firefox */
     -o-transform: rotate(-90deg); /* Opera */
     -ms-transform: rotate(-90deg); /* IE 9 */
     color: rgb(166,166,166);
     font-size: 18px;
     word-wrap: break-word;
     font-family: Arial;
     width: 100%;
  }

<br><br><br><br>
<table border='1'>
  <tr>
    <td>titulo</td>
    <td rowspan=4><p class='horizontal'>texto deveria ser quebrado</p></td>
  </tr>
</table>


<br><br><br><br>
<table border='1'>
  <tr>
    <td>titulo</td>
    <td rowspan=4><p class='vertical'>texto deveria ser quebrado</p></td>
  </tr>
</table>

---

As I said beforeIt is important notice that text leaks due to its negative margins, so you can fix the width and height of the element <p>, for example:

 p.horizontal
 {
     color: rgb(166,166,166);
     font-size: 18px;
     word-wrap: break-word;
     font-family: Arial;
     width: 150px;
     height: 150px;
 }


 p.vertical
 {
     transform: rotate(-90deg);
     -webkit-transform: rotate(-90deg); /* Safari/Chrome */
     -moz-transform: rotate(-90deg); /* Firefox */
     -o-transform: rotate(-90deg); /* Opera */
     -ms-transform: rotate(-90deg); /* IE 9 */
     color: rgb(166,166,166);
     font-size: 18px;
     word-wrap: break-word;
     font-family: Arial;
     width: 150px;
     height: 150px;
  }

<br><br><br><br>
<table border='1'>
  <tr>
    <td>titulo</td>
    <td rowspan=4><p class='horizontal'>texto deveria ser quebrado</p></td>
  </tr>
</table>


<br><br><br><br>
<table border='1'>
  <tr>
    <td>titulo</td>
    <td rowspan=4><p class='vertical'>texto deveria ser quebrado</p></td>
  </tr>
</table>