如何在表单元格中包装文本而不包装子元素

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.

我有一个包含4个内联元素的表格单元格。前3个是图标,根据单元格数据可能存在也可能不存在。第四个是包含文本的div。

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:

单元格css具有“white-space:nowrap”,因为我想确保所有图标和文本始终在同一行。但是,当文本太长而不适合时,它就会脱离屏幕;因为“nowrap”。我希望文本本身在必要时包装在图标旁边。像这样:

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.

看起来像是CSS的一件事就是在包含文本的div上设置一个特定的宽度。但是,这不是一个真正的选项,因为宽度是可变的,具体取决于显示的图标数量。

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

这是一个基本布局的jsfiddle。您可以看到文本如何超出容器。 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;
}

2 个解决方案

#1

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

我相信这就是你所需要的:https://jsfiddle.net/oj141Lpp/1/

Changed the following:

改变了以下内容:

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

and removed the .nowrap class

并删除了.nowrap类

#2

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

这是使用flexbox属性显示的小提琴的一个分支:flex;:

Fiddle Demo

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

我认为它会得到你追求的结果。有关flexbox的更多信息,请访问此处。

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.

另外,flexbox有点新,所以在全力以赴之前我会看到你的项目要求是什么。我知道iPhone和iPad不喜欢它。这是一个完整的浏览器支持列表。