Question

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

cell css有＆＃34; white-space：nowrap＆＃34;因为我想确保所有图标和文字始终在同一行。但是，当文本太长而不适合时，它就会离开屏幕;因为＆＃34; nowrap＆＃34;。我希望文本本身在必要时包裹在图标旁边。像这样：

我尝试过各种我能想到的事情。任何允许单元格内容换行的内容都会导致图标之间发生换行，因此文本显示在与图标不同的行上，或者图标出现在彼此不同的行上。

我试过漂浮左边的内容;在表格单元格上设置特定宽度;甚至使用内部表作为布局，我知道应该避免。基本上我得到的唯一两个结果是单元格包装中没有任何内容，意味着文本只是在包含区域之外，或者单元格在图标之后，而不是在文本的中间。

似乎它可以用于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 Demo

我认为它会得到你所追求的结果。有关flexbox的更多信息，请转到here。

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

Answer 2

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

更改了以下内容：

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

并删除.nowrap类

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

2 个答案: