gpt4 book ai didi

html - 如何使省略号在 HTML 表格中起作用?

转载 作者:行者123 更新时间:2023-12-05 03:25:45 24 4
gpt4 key购买 nike

<分区>

我在 HTML 页面上有一些表格,其中一些单元格需要限制宽度。任何太长的文本都需要用省略号 (...) 截断以显示还有更多文本。text-overflow: ellipsis 做得很好,我会说!

我的例子是这样的:

<html>

<head>
<title>Test table ellipsis</title>
<style>
table th,
table td {
border: 1px solid red;
}

table .col-A {
width: 25%;
}

table .col-B {
width: 75%;
}

table .col-B div {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
</style>
</head>

<body>
<table>
<thead>
<th class="col-A">Column A</th>
<th class="col-B">Column B</th>
</thead>
<tbody>
<tr>
<td class="col-A">Value A1</td>
<td class="col-B">Value B1</td>
</tr>
<tr>
<td class="col-A">Value A2</td>
<td class="col-B">
<div class="col-B">Value B2 that is going to be ellipsized, because it's way too long!</div>
</td>
</tr>
</tbody>
</table>
</body>

</html>

乍一看,这似乎可行。但是你看得越多,它就越崩溃:

  • 我将列宽指定为 25% 和 75%。显然不是这样。更改长文本直接影响列宽
  • 文字是“椭圆形”的,但还有很多空间。为什么它不使用该可用空间(在下面的屏幕截图中标记为橙色)?

Example of table with ellipsized text

我真的在寻找一种可以很好地处理表格的解决方案(因为它显示的数据实际上是表格形式的,而且我有大量假设使用表格的现有 CSS)。但在这一点上,我也对使用 div 和 flexbox 的某种组合的解决方案持开放态度。

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