css - 在 css 中实现表格的最简洁方法，哪一列没有明确的宽度(但包装内容)，而其他列具有固定宽度？

Question

我有两个表格，每个表格占据屏幕的 50%，两者看起来完全一样。每个表包含三列，第一列没有明确的宽度，它占用了所有可用空间。无论屏幕尺寸如何，其他两列的宽度都是固定的。我想把第三列的内容换行。

我尝试使用网格来构建这样的表格:

display: grid;
grid-template-columns: auto 80px 60px;

我在第一列使用 flex，如下所示:

display: flex;
align-items: center;
flex-grow: 1;
flex-wrap: wrap;

如果第一列的内容没有溢出，这段代码运行良好，但是如果第一列的内容太长，内容就会溢出(可能是因为 flex-wrap 在没有显式宽度的情况下无法工作，但是 我需要第一列(没有明确的宽度)，其内容被包裹起来，以填充剩余空间)。

我想知道，是否应该使用 flex/table/grid 来实现，以及如何使用 css 处理第一列(甚至可能吗？)。

这是不同屏幕上的两张表格图片(第一个较小的屏幕，第二个较大的屏幕)

Answer 1

我建议使用 word-break “设置换行符是否出现在文本溢出其内容框的任何地方。”

可用values :

• normal - “使用默认换行规则。”
• break-all - “为防止溢出，应在任意两个字符之间插入分词符(不包括中文/日文/韩文文本)。”
• keep-all - “中文/日文/韩文 (CJK) 文本不应使用分词符。非 CJK 文本行为与正常相同”
• break-word - “为防止溢出，如果行中没有其他可接受的断点，通常不可断的词可能会在任意点被断。”

文档注释:

In contrast to word-break: break-word and overflow-wrap: break-word, word-break: break-all will create a break at the exact place where text would otherwise overflow its container (even if putting an entire word on its own line would negate the need for a break).