1

I'm trying to build web app designed for mobiles. But I have some links which are extremely large. What i want to do is break these strings if the text doesn't fit, and use the entire string if it fits.

I tried using word-wrap:break-word:

.breakWord {
    width: 100% 
    word-wrap: break-word;
}

My html is:

<table>
  <tr>
   <td rowspan="2" style="width:10%" >picture</td>
   <td colspan="2" style="width:90%" class="breakWord">link</td>
  </tr> 
   <tr>
    <td style="width:80%">info1</td>
   <td style="width:10%">info2</td>
   </tr>
  <tr>
  </tr> 
</table>

This code doesn't fit on the page - a horizontal scroll bar appears.

How can I make the text fit?

Eric
  • 95,302
  • 53
  • 242
  • 374
Teo Panait
  • 21
  • 1
  • 3

1 Answers1

0

If you correct the errors in your source, it will work.

  • Remove the width:100% from the style block. It conflicts with the inline style in the td, and misses a semicolon
  • colpan should be colspan

Also, I believe that some browsers can get confused when encountering a colspanned td with a width style. You can safely remove the style="width:90%", since the two tds below set the width correctly already.

Edit:
So it doesn't work everywhere. According to the answers to this question, the problem is with the table: first, the width of the table is calculated, and then the 10% and 90% are taken as the calculated width instead of the available width on the screen.
So a possible solution is to give the table a specific width, and set its table-layout to fixed.

<table style="width:100%; table-layout:fixed">
Community
  • 1
  • 1
Mr Lister
  • 45,515
  • 15
  • 108
  • 150