如何在字母之间设置相等的间距，以便自动换行始终如一

Posted 2023-03-28

【中文标题】如何在字母之间设置相等的间距，以便自动换行始终如一

【英文标题】：How to set equal spacing between letters so that word wrap works consistently

【发布时间】：2020-01-03 00:11:26

【问题描述】：

我有一个角度组件，它生成一个网格表（使用 ag-grid），标题行用作日历，格式化 FRI - 28.09 中的答案。 问题是因为我有一个用

包裹的词

text-overflow: clip;
overflow: visible;
white-space: normal;

网格是响应式的，它的宽度会发生变化，这意味着单元格有时可以更宽。包含“FRI”（星期五）的日期，由于“I”而在所有其他日期之后进入文字包装。 如何在不破坏单元格的响应以及不将字体样式更改为等宽字体的情况下使其在中断处保持一致。

【问题讨论】：

另外一个类似于 open-sans 的等宽 css 也是一个可以接受的解决方案

或者为 ag-grid 列宽设置断点也可以，但这是一个完全不同的问题

如果你想剪断字符串而不是让它环绕，使用overflow: hidden和white-space: nowrap。见developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

我希望它能够换行，但要始终如一

【参考方案1】：

所以我能想到的最好的... 由于单元格是用 ag-grid 制成的，因此我可以识别文本的内部元素并在文本的类上设置固定宽度。通过这种方式，我可以确保自动换行始终处于活动状态，而不会破坏网格的响应能力。 这并不能解决自动换行在字母数量上一致的问题，而不是字母占用空间的数量。