服務器端客戶端文字寬度的計算

Question

環境： ASP.NET MVC C＃應用程序。

業務案例：使用div作為圖形，並在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));
}

只需對總長度/所需寬度做一些簡單的划分即可，這應該告訴您文本將占用多少行。 如果用戶使用的字體與您用來計算該字體的字體不同，則所有這些都會改變。