Css 内联块跨度（html td内部）文本省略号在长单词上失败

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

这是我使用的html：

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

+
Sed eu nisi sit amet

外部跨距居中：它包含一个按钮和一些文本

按钮的位置是通过外部左侧的绝对定位来完成的，一些左侧填充可以避免文本进入按钮下方

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

---

演示首先在

中提供，通常您希望避免将块级元素放入内联元素中，这就是一种情况。请看这里：

请注意：“通常，块级元素可能包含内联元素和其他块级元素。通常，内联元素可能只包含数据和其他内联元素。这种结构区别的固有思想是，块元素创建的结构比内联元素“更大”

关于CSS，您会说：

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

关于HTML，您需要将

span

s更改为

div

s：

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

+
Sed eu nisi sit AMETAMET

否则，将

p

元素的宽度设置为100%将无法使其宽度适合其父元素，因为父元素是一个

span

内联元素

多谢各位

请参见此处：

尝试以下操作：

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

---

最大宽度（或者如果您愿意，可以使用宽度）强制溢出。

谢谢，但我需要让文本溢出：省略号起作用，或者如果不可能，打断长单词。我更改了答案。请告诉我这是否回答了你的问题。谢谢你。问题是我不能用那种方式施加宽度。我需要的单元格内容采取所有可用的宽度（如果表的大小调整）给它我最好的镜头奥利维尔。请查看编辑并告诉我是否有帮助。谢谢。非常感谢你救了我一天：-）我删除了你添加的段落，这对于解决我的问题来说是不必要的（请参阅）。如果你能相应地更新你的答案，那就太好了。再见，我没有最大宽度。如果表格被调整大小并变大，我想看到我的全部内容啊，我明白了。这将是一个使用calc的好时机：pI最终用一些JavaScription设置了一个动态最大宽度。您是否尝试过@media。。。在css中定义各种屏幕大小的最大宽度？最大宽度中em的含义是什么？我通常在字体大小的上下文中看到这一点。事实上它对我有用，但我想知道为什么？