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，您需要将span更改为div s：

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

否则，将p元素的宽度设置为100％将无法使其宽度适合其父元素，因为父元素是span，它是内联元素。

谢谢。