我想在表格单元格中使用CSS text-overflow,这样,如果文本太长,一行无法容纳,它将使用省略号裁剪,而不是换行到多行.这个是可能的吗?

我试过这个:

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

但是white-space: nowrap似乎使文本(及其单元格)不断向右扩展,使表格的总宽度超出其容器的宽度.但是,如果没有它,文本在到达单元格边缘时将继续换行为多行.

推荐答案

若要在表格单元格溢出时使用省略号裁剪文本,需要在每个td类上设置max-width CSS属性,溢出才能正常工作.不需要额外的布局div元素:

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

对于响应式布局,请使用max-width CSS属性来指定列的有效最小宽度,或者只使用max-width: 0;来实现无限的灵活性.此外,包含表需要特定的宽度,通常为width: 100%;,列的宽度通常设置为总宽度的百分比

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%;}

历史记录:对于IE9(或更低版本),您需要在HTML中包含此选项,以修复特定于IE的呈现问题

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

Css相关问答推荐

在react native中应用阴影

在Angular mat-drawer组件中防止在mat-drawer-innercontainer中添加滚动条

CSS 内联 Flex 和段落换行

如何更改 JqGrid 中的pager 背景 colored颜色 ?

:is() 伪类是否支持相邻sibling 表达式中第二个元素的组合器?

.SVG 文件对象在锚标签下可点击

CSS 字符串变量的正确null值是多少?

不同的背景 colored颜色 取决于 URL

父母是内联块,子元素有%填充=奇怪的行为

CSS 媒体查询不为桌面版的圣杯响应式布局包装 Flexbox 容器元素

使用 Flex Box Tailwind CSS 的元素不相等

如何在 nth-child 中正确传递 CSS 变量?

中心表单提交按钮 HTML / CSS

什么是 ::content/::slotted 伪元素,它是如何工作的?

CSS媒体查询仅针对iPad和iPad?

透明的空心或切出的圆圈

如何使用 Gulp 复制多个文件并保持文件夹 struct

范围内的 CSS 未在组件中应用

使用没有设置宽度或高度的边界半径的胶囊形状?

是否可以在 CSS 中定义常量?