表格单元格中的 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.

推荐答案

要在表格单元格溢出时使用省略号剪切文本，您需要在每个单元格上设置 max-width CSS 属性td 类使溢出起作用.不需要额外的布局 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 elements 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.column_a {width: 30%;}
td.column_b {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屋！