Html css：如何使用带有文本溢出省略号的可变列大小

这开始让我发疯了，谢谢你的帮助

我希望每个未“固定”的

的最大宽度为150px，最小宽度为10px，但是当浏览器的大小减小时，它们应该缩小到固定的大小（并且宽度相等）。我还希望每个非“固定”的

中的文本具有文本溢出：省略号

到目前为止，我似乎无法实现这一目标：

HTML:

更新：这显示了我对列的要求，但正如您所看到的，文本并没有用省略号隐藏：

更新：这越来越近了，但仍然没有省略号：-(

更新：已解决解决方案发布在下面

---

我认为display:table和display:table单元格是一条死胡同：表布局将始终使用显示所有内容所需的最大单元格高度（见下文），但您需要的是相反的高度。另一方面，表布局有利于以您描述的方式使用水平空间

一种完全不同的方法是使用一些javascript库来为您进行布局。有很多这样的方法。例如：

• 区块的“pintrest-like”布局
• “数据表”布局
• 总平面图
• 还有更多

p、 美国

使用float和更简单的html，您可以获得所需的高度，而不是宽度：

<ul>
    <li class="fixed">Fixed Size</li>
    <li class="ellipsis">this text is very very long and it goes on and on and
on and on but does not wrap</li>
    <li>short</li>
    <li>one more tab</li>
    <li>another tab</li>
</ul>

请参阅此小提琴以了解工作示例：

---

最终实现了这一点……解决方案是（无需更改html）：

---

HTML结构可以更改吗？@VimalStan是的，HTML可以更改。您需要椭圆做什么？HTML只会将文本打断以适合您的li（一旦删除空白：nowrap；）。你喜欢隐藏部分文字而不是将文字拆分成几行吗？@bjelli是的，要求文字不换行，当没有足够的空间时，用省略号向右隐藏。@magritte你是对的，删除了答案。如果我找到解决方案，我会发布一条。我需要列的宽度相等（那些不是固定的），因此显示：表格，显示：表格单元格。还有其他方法可以实现吗？cheers.cheers Bjelli，我有一个javascript解决方案可以工作（设置div的宽度似乎可以将文本溢出：省略号变为动作），只是认为如果可以使用纯css会更好。

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: table;
    border-spacing: 6px 0px;
}

li {
    display: table-cell;
    background-color: red;
    width: 150px;

}

li > div {
     overflow: hidden;
    text-overflow: ellipsis;

}

li > div > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

li.fixed {
    width: 100px;
    min-width: 100px;
    text-align: center;
}

<ul>
    <li class="fixed">Fixed Size</li>
    <li class="ellipsis">this text is very very long and it goes on and on and
on and on but does not wrap</li>
    <li>short</li>
    <li>one more tab</li>
    <li>another tab</li>
</ul>

li {
    float:left;
    min-width: 10px;
}

li.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

li.fixed {
    width: 150px;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: table;
    border-spacing: 6px 0px;
}

li {
    display: table-cell;
    background-color: red;
    min-width: 20px;
    width: 120px;
}

li.fixed {
    width: 100px;
    min-width: 100px;
    text-align: center;
}

ul > li > div {
    display: table;
    border-spacing: 0px 0px;
    table-layout: fixed;
    width: 100%;
}

ul > li > div > span {
    display: table-cell;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}