CODEWITHSUNDEEP
htmlcss
HockChai Lim
HockChai Lim

Reputation: 1713

max-width, width not working on long text with space

I've a table with a td that contains a long string of text without any space. I want to limit the width of the td. But max-width (or width) is not working.

https://jsfiddle.net/gh6eru8p/

<tables>
  <tbody>
    <tr>
      <td>
        <label>Note:</label>
      </td>
      <td  style="max-width:30%">
1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
      </td>
    </tr>
  <tr>
</tbody>
</table>

Upvotes: 2

Views: 2041

Answers (2)

Asool
Asool

Reputation: 14189

Width should work

apply a class name (say .one) to the td. then add this css

.one {
  width: 30%;
  word-break: break-all;
}

Are you trying to get the table to expand based on the content in it? Or do you want it to simply be 30%?

Upvotes: 1

Rohit
Rohit

Reputation: 1812

You need to break the word using word-break, width will work. If you want to add max-width refer this with word-break

<table>
  <tbody>
    <tr>
      <td>
        <label>Note:</label>
      </td>
      <td  style="word-break: break-all;width: 42%;">
1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 7

Related Questions