How to Wrap Numbers in bootstrap table?

Question

Using bootstrap table we are displaying content from DB, generally this data's are huge in text size. So for all the headers we have given some fixed width like below,

<th width="100px">Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text </>

Sample wrapping text,

When the text is greater than the allocated width then it wrapped into next line with proper alignment. But same logic couldn't work for non-spaced numbers like below,

<th width="100px">1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@</>

Sample Non-wrapping Numbers,

In above screenshot, the numbers are just overlapping to next column. How to make it wrap from the fixed width?

Any suggestion or help would be appreciated.

Answer 1

You can use word-wrap: break-word to wrap text.

th {
  word-wrap: break-word;
  max-width: 100px;
}

th {
  word-wrap: break-word;
  max-width: 100px;
}

<table>
  <thead>
    <th>1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@</th>
  </thead>
</table>