客户端文字宽度的服务器端计算

Question

环境：ASP.NET MVC C＃应用程序。

业务案例：：使用div作为图形，并在div内使用文本作为标签，创建一个包含垂直框的带标签框的图表。 div和标签的宽度为固定，高度为可变。根据行数，标签的高度确定 div 的高度，而该高度又确定下一个div的顶部位置 /图形在它下面。 （请参见下图）。

代码体系结构：图形高度和顶部位置是在服务器上计算的，还可以导出以用于其他图形格式；更改该代码的位置不在范围内。客户端JS代码使用“自动换行”和“中断自动换行”将标签很好地适合div /图形（根据需要使用“隐藏的溢出”进行截断）。

代码详细信息：当前，标签高度是在服务器上通过查找换行符来计算的。换行符是通过对字符进行计数来确定的（也可以通过“换行符”来完成复杂的操作，例如空白，破折号，逗号）。服务器上一行的计数限制为20个字符（可以轻松更改）。

问题：JS / CSS产生的换行符与服务器端的计算结果不同，这主要是由于字符宽度的差异。例如，“ BBBBBBBBBBBBBBBBBBBBBB”将比“ iiiiiiiiiiiiiiiiiiii”更宽 在客户端（如此处所示）。

结果，“ B”将在17个字符后换行，并需要两行，而“ 1”将适合一行。

然后的问题是，在某些情况下，当客户端显示屏上仅显示单行高度时，服务器将计算对两行高度的需求。在这种情况下，div会比需要的高，而div的位置会比需要的低。 （已简化了业务案例；由于div高度问题，实际案例中的视觉效果有些刺耳。）

需要：一种更准确地计算服务器上标签的预期行数的方法，以便更准确地描述客户端上相应的div高度和相关的最高位置。

已考虑的替代方案：

1）使用正则表达式或其他方法来优化服务器端代码，以解决大写字符的问题。这似乎可行，但很麻烦。

2）在服务器上使用图形类创建虚拟图形，将文本放入其中，然后检查是否有换行符。看来这可能可行，但尚不清楚该技术是否存在，并且可能性能不佳。

问题

A）替代2在技术上是否可行？

B）还有其他替代方法可以考虑吗？

Answer 1

您不能仅仅依靠字符串的长度来确定其实际宽度。字符的字体宽度会给您带来问题。我没有W宽，因此您的计算将始终不准确。您可以使用以下代码确定字符串的总长度：

using (System.Drawing.Graphics graphics = System.Drawing.Graphics.FromImage(new Bitmap(1, 1)))
{
    SizeF size = graphics.MeasureString("Hello there", new Font("Segoe UI", 11, FontStyle.Regular, GraphicsUnit.Point));
}

只需对总长度/所需宽度做一些简单的划分即可，这应该告诉您文本将占用多少行。如果用户使用的字体与您用来计算该字体的字体不同，则所有这些都会改变。