内联块跨度(在html td内)文本省略号在长字上失败

Question

我的目标是在HTML表格中放置一个带有展开按钮的单元格.

这是我使用的html:

<td>
  <span class='outer'>
    <button>+</button>
    <span class='inner'>Sed eu nisi sit amet</span>
  </span>
</td>

外跨度居中:它包含一个按钮和一些文本.

按钮位置通过外部左侧的绝对定位完成,一些左侧衬垫避免文本位于按钮下方.

一切都很好,除非我有一个不适合td的单词.我认为溢出:隐藏+文本溢出:省略号就足够了,但我有一个问题.

Answer 1

尝试类似的东西:

.table2 .inner {
    text-overflow: ellipsis;
    max-width: 2em;
    white-space: nowrap;
}

最大宽度(或者如果您愿意,只使用宽度)会强制溢出.

Answer 2

首先,通常您希望避免将块级元素放在内联元素中,这就是这种情况.看这里:

请注意:"通常,块级元素可能包含内联元素和其他块级元素.通常,内联元素可能只包含数据和其他内联元素.这种结构区别的固有特性是块元素创建"更大"的结构比内联元素."

关于CSS,你会说:

.table2 p
{
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
    width: 100%;
}

关于HTML,您需要将spans 更改为divs:

<td>
    <div class='outer'>
        <button>+</button>
        <div class='inner'><p>Sed eu nisi sit ametametamet</p></div>
    </div>
</td>

否则,将p元素的宽度设置为100%将无法使其宽度适合其父元素,因为父元素是span内联元素.

谢谢.