在 Blazor WebAssembly 中测量字符串的宽度答案

【问题标题】：Measure width of string in Blazor WebAssembly在 Blazor WebAssembly 中测量字符串的宽度
【发布时间】：2021-11-10 00:30:10
【问题描述】：

我有一个第三方 Blazor WebAssembly 组件，我想根据将在组件中显示的字符串的宽度设置它的宽度属性。如何编写一个 C# 函数来获取字符串并计算它将呈现的宽度并考虑 CSS 字体值？还是只能在 JavaScript 中完成？

编辑：我基本上想这样做，但在我的 Blazor C# 代码中：Calculate text width with JavaScript

【问题讨论】：

请举例
你能举个例子来说明你想要达到的目标 - 而不是如何实现的。基于对创建类型的破坏网站进行的单一测量来确定大小。想象一下，如果您的问题是这样呈现的，然后我缩放或更改了窗口大小 - 那将是多么混乱。 CSS 可能会帮助您实现目标，但您没有分享为什么要这样做。

【解决方案1】：

我不知道我是否理解了这个问题，以防万一方法不对，我会删除答案。

如果您向视图模型类添加两个属性，其中第二个是 getter，其值设置为第一个的长度，使用简单的 Length 函数，我认为它应该可以工作。

那么您只需要将值分配给字符串类属性，并将@viewModel.stringOneLength 分配给组件的属性。

显然，这种方法需要您从外部（父）组件或通过任何基于事件的方法将字符串设置为组件内部。

【讨论】：