html - How to wrap text in table cell without wrapping child elements -

I have a table cell that contains 4 inline elements. First 3 is an icon, and based on cell data May or may not exist. Fourth is a divisor in which there is a text.

Cells are "white-space: ipod" in the CSS because I want to make sure that all the symbols and the text are always present on the same line. However, when the text is too long to fit, this screen stops; Due to "abrap" I want the text to be wrapped when the mouse is next to the icons. Like this:

I have tried every combination of those things which I can think of, due to the wrapping of the contents of the cell, causing the wrapping between the mouse, so that one Icons appearing on different lines, or appearing on different lines.

I've tried floating content left; Set a specific width on the table cell; Even using an internal table in the form of layouts, which I know should be avoided. In fact, I have achieved only 2 results or there is nothing in the cell, which means that the text only goes out of the field, or in the middle of the text, wrap the cell after the icon.

One thing that seems to be working in the form of CSS is setting a specific width on the div in which the text is included, however, this is not really an option because the width of the variable How many marks are being shown on the basis

Here I have a JSfield with basic layout. You can see how the text goes beyond the container

I believe you need it:

< P> changed the following:

  .inline {display: table-cell; Vertical-alignment: top; }  

and .Nowrap class

has been deleted.