HTML - Content exceeds table cell with fixed width

[PloMar]

I have a text and an input field in a table cell. The column with that cell has fixed max-width (150px), the problem is that the text exceeds the right margin of the cell.
How to make so the text inside the table to not exceeds the cell border, but to go to a new line, keeping the cell's width fixed?
Thanks

Set in css the dimensions for the table and its columns, and define the width of the elements which are in the table cell to be less than the column width. Also, add in css word-break: break-all; to make the text with long words goes to next line.
See and test this example.

Code: Select all

<style>
#tb1 {
  position: relative;
  margin: 4px auto;
  width: 90%;
  border: 1px solid #333;
}
#tb1 td, #tb1 th {
  border: 1px solid #999;
}
#tb1 td.col {
  width: 150px;
  max-width: 150px;
  word-break: break-all;
}
#tb1 td input {
  width: 130px;
}
</style>

<table id="tb1"><tr>
  <th>title 1</th>
  <th>title 2</th>
</tr><tr>
  <td class="col">line 2 - column 1</td>
  <td>line 2 - column 2</td>
</tr><tr>
  <td class="col">line 3, column 1, Column with long text. Will be added automatically on new lines without exceeding cell size. <br>
   text Box: <input type="text" /></td>
  <td>line 3 - column 2</td>
</tr><tr>
  <td class="col">linia 4- column 1
  <p>Text added into a paragraph in table cell. SomeLongWord_moreCharactersInThisWord goes automatically on new line.</p></td>
  <td>line 4 - column 2</td>
</tr></table>

Demo:

title 1	title 2
line 2 - column 1	line 2 - column 2
line 3, column 1, Column with long text. Will be added automatically on new lines without exceeding cell size. text Box:	line 3 - column 2
linia 4- column 1 Text added into a paragraph in table cell. SomeLongWord_moreCharactersInThisWord goes automatically on new line.	line 4 - column 2