html - 如何使文本溢出:省略号在表中工作？

code pen

的CSS

table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border: 1px solid black;
    width: 14.285714286%;
    box-sizing: border-box;
}
th {
    vertical-align: middle;
}
td {
    height: 100px;
    vertical-align: top;
    padding: 4px;
}
.event-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.event-list li {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
span.day {
    float: right;
    font-weight: bold;
}
.other-month .day {
    color: #888;
}
td.other-month {
    background-color: #eee;
}
body {
    font-family: sans-serif;
    font-size: 10pt;
}

html

<td class="day-cell current-month"><span class="day">2</span><ul class="event-list"><li>1-4 FM - Fishing</li></ul></td>

我已将每个表格单元格的宽度设置为14.28％，但是<li>会将表格单元格推出，即使我在它们上具有overflow:hidden。我不希望列表项拉伸单元格；如果行很长，我希望他们显示省略号。那可能吗？

最佳答案

只需将table-layout: fixed;添加到table

演示：http://jsfiddle.net/Y8Zx5/

说明：这将强制表格单元强制具有指定的14.285714286%;宽度，从而防止表格单元的宽度随内容而增长，并导致省略号出现在所需的宽度中。

关于html - 如何使文本溢出:省略号在表中工作？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24067621/