CODEWITHSUNDEEP
htmlcssword-wrap
GendoIkari
GendoIkari

Reputation: 11914

How to wrap text in table cell without wrapping child elements

I have a table cell that contains 4 inline elements. The first 3 are an icon, and may or may not exist depending on the cell data. The fourth is a div containing text.

The cell css has "white-space: nowrap" because I want to make sure all the icons and the text are always on the same line. However, when the text is too long to fit, it just goes off the screen; because of the "nowrap". I want the text itself to wrap when necessary, next to the icons. Like this:

https://i.sstatic.net/xoZYF.png

I have tried every combination of things I can think of. Anything that allows the cell contents to wrap causes the wrapping to happen between the icons, so that either the text appears on a different line than the icons, or the icons to appears on different lines from each other.

I have tried floating the contents left; setting a specific width on the table cell; even using an inner table as layout, which I know should be avoided. Basically the only 2 outcomes I have gotten are either nothing in the cell wraps, meaning the text just goes outside the containing area, or the cell wraps after an icon, instead of in the middle of the text.

The one thing that seems like it was could work in terms of CSS is setting a specific width on the div that contains the text. However, this is not really an option because the width is variable depending on how many icons are being displayed.

Here is a jsfiddle with the basic layout I have. You can see how the text goes beyond the container. https://jsfiddle.net/oj141Lpp/\

<div class="container">
<table>
     <tbody>
         <tr>
             <td class="nowrap">
                  <i class="icon1"></i>
                  <div class="inline">
                                <i class="icon1"></i>
                            </div>
                  <div class="inline">
                                <i class="icon1"></i>
                        </div>  
                 <div class="inline">
                     text text text text text text text text text text 
                 </div>
             </td>
         </tr>
    </tbody>
</table>
</div>


.inline{
display:inline-block;
}
.nowrap{
white-space: nowrap;
}
.icon1{
    display:inline-block;
    height:28px;
    width:28px;
    background-image: url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS7DnGYT5JhBomtXB4g_c6lzV9mM3hBYpm6mos2LrT3AWaEhAmw');
}
.container{
    width:300px;
    border:solid 1px;
}

Upvotes: 1

Views: 1851

Answers (2)

deebs
deebs

Reputation: 1410

I believe this is what you need: https://jsfiddle.net/oj141Lpp/1/

Changed the following:

.inline { 
   display: table-cell;
   vertical-align: top;
}

and removed the .nowrap class

Upvotes: 1

zgood
zgood

Reputation: 12571

Here is a fork of your Fiddle using the flexbox property display:flex;:

Fiddle Demo

I think it gets the result you are after. For more info on flexbox go here.

Also flexbox is kinda new so I would see what your project requirements are before going all out. I know iPhone and iPads don't like it. Here is a list full browser support.

Upvotes: 1

Related Questions