word-wrap: break-word; is not working vertically

Question

word-wrap: break-word; is not working vertically

Navigation

#1 by (1 votes)

1

See a working example in this jsfiddle

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

Thank you.

javascript html css

asked by anonymous 01.02.2018 / 14:47

1 answer

Mask in form only in html and css Crontab function does not work

score 1 · Accepted Answer

And also not working horizontally, so the problem is not in transform , but the lack of width , since the element is a <p> inside a td you can use width: 100%;

It's important to 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 earlier It's important to note that text leaks because of its negative margins, so you can set the width and height of the <p> element, 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>