在表单元格中的CSS文本溢出？ [英] CSS text-overflow in a table cell?

问题描述

我想在表格单元格中使用CSS text-overflow ，这样，如果文本太长，无法在一行上，它将使用省略号包装到多行。这是可能吗？

I want to use CSS text-overflow in a table cell, such that if the text is too long to fit on one line, it will clip with an ellipsis instead of wrapping to multiple lines. Is this possible?

我尝试过：

td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

但是 white-space：nowrap 文本（及其单元格）不断向右扩展，将表的总宽度超出其容器的宽度。没有它，但是，当它碰到单元格的边缘时，文本会继续换行到多行。

But the white-space: nowrap seems to make the text (and its cell) continually expand out to the right, pushing the total width of the table beyond the width of its container. Without it, however, the text continues to wrap to multiple lines when it hits the edge of the cell.

推荐答案

剪辑文本当它溢出表单元格时，您需要在每个 td 上设置 max-width 类为溢出工作。不需要额外的布局div

To clip text with an ellipsis when it overflows a table cell, you will need to set the max-width CSS property on each td class for the overflow to work. No extra layout div's are required

td {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

使用 max-width CSS属性指定列的有效最小宽度，或者使用 max-width：0; 无限的灵活性。此外，包含表将需要特定的宽度，通常 width：100％; ，并且列的宽度通常设置为总宽度的百分比

For responsive layouts; use the max-width CSS property to specify the effective minimum width of the column, or just use max-width: 0; for unlimited flexibility. Also, the containing table will need a specific width, typically width: 100%;, and the columns will typically have their width set as percentage of the total width

table {
    width: 100%;
}
td {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
td.columnA {
    width: 30%;
}
td.columnB {
    width: 70%;
}

历史：对于IE 9（或更低版本），您需要在HTML，以修复IE特定的呈现问题

Historical: For IE 9 (or less) you need to have this in your HTML, to fix an IE-specific rendering issue

<!--[if IE]>
<style>
    table {
        table-layout: fixed;
        width: 100px;
    }
</style>
<![endif]-->

这篇关于在表单元格中的CSS文本溢出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！