gpt4 book ai didi

表格单元格中的 CSS 文本溢出?

转载 作者:数据小太阳 更新时间:2023-10-29 09:04:25 25 4
gpt4 key购买 nike

我想在表格单元格中使用 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; 以获得无限的灵 active 。此外,包含表需要特定的宽度,通常是 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%;}

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

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

关于表格单元格中的 CSS 文本溢出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9789723/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com