Question

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个。我不希望列表项拉伸细胞;如果线条很长，我希望它们显示省略号。这可能吗？

Answer 1

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

即可

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

说明：这会强制表格单元格具有14.285714286%; 强制的指定宽度，从而防止表格单元格的宽度增加，并导致省略号以您想要的宽度出现。

Answer 2

您是否尝试添加文本溢出：省略号;？

我在THIS DEMO LINK

使用了bootstrap

它使用以下CSS

.setWidth {
 max-width: 80px;
 }

.concat>div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: inherit;
}

对于此HTML

<td class="setWidth concat"><div>Some text for table cell here</div></td>

如何获得文本溢出：省略号在表中工作？

CSS

HTML

2 个答案: