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

Question

我有一个包含 4 个内联元素的 table 单元格。前 3 个是图标，可能存在也可能不存在，具体取决于单元格数据。第四个是 div 包含文本。

单元格 css 有 "white-space: nowrap"，因为我想确保所有图标和文本始终位于同一行。然而，当文本太长放不下时，它就会从屏幕上消失；因为 "nowrap"。我希望文本本身在必要时换行，紧挨着图标。像这样：

我已经尝试了所有我能想到的组合。任何允许单元格内容换行的操作都会导致图标之间发生换行，这样要么文本出现在与图标不同的行上，要么图标出现在彼此不同的行上。

我试过向左浮动内容；在 table 单元格上设置特定宽度；甚至使用内部 table 作为布局，我知道应该避免这种情况。基本上我得到的仅有的 2 个结果要么是单元格换行中没有任何内容，这意味着文本只是超出了包含区域，要么是单元格在图标之后换行，而不是在文本中间。

在 CSS 方面似乎可行的一件事是在包含文本的 div 上设置特定宽度。但是，这并不是一个真正的选项，因为宽度会根据显示的图标数量而变化。

这是一个带有我的基本布局的 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;
}

Answer 1

这是使用 flexbox 属性 display:flex;:

的 Fiddle 分支

Fiddle Demo

我认为它可以得到您想要的结果。有关 flexbox 的更多信息，请访问 here.

Flexbox 也有点新，所以我会在全力以赴之前了解您的项目要求。我知道 iPhone 而 iPad 不喜欢它。 Here 是完整的浏览器支持列表。

Answer 2

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

更改了以下内容：

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

并删除了 .nowrap class

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

How to wrap text in table cell without wrapping child elements

html

css

word-wrap