服务器端blazor中的省略号

Question

如何在服务器端blazor中获得省略号？因此，要求是截断并显示"；显示更多"；链接，如果显示的文本有200个字符长，但如果用户决定单击"显示更多"，则渲染整个文本。

注：

• 不想使用css

我是blazor的新手，但做了一些研究，没能找到什么。

Answer 1

这是我创建的一个可以使用的快速组件。

演示：https://blazorfiddle.com/s/yxnf021e

<div>
@GetDisplayText()
@if (CanBeExpanded)
{
@if (IsExpanded)
{
<a @onclick="@(() => { IsExpanded = false; })" style="font-style: initial; font-size: 0.7em; color: dimgray; cursor: pointer;">Show less</a>
}
else
{
<a @onclick="@(() => { IsExpanded = true; })" style="font-style: initial; font-size: 0.7em; color: dimgray; cursor: pointer;">Show more</a>
}
}
</div>
@code {
[Parameter] public string Text { get; set; }
[Parameter] public int MaxCharacters { get; set; } = 200;
public bool IsExpanded { get; set; }
public bool CanBeExpanded => Text.Length > MaxCharacters;
public string GetDisplayText()
{
return IsExpanded ? Text : Truncate(Text, MaxCharacters);
}
public string Truncate(string value, int maxChars)
{
return value.Length <= maxChars ? value : value.Substring(0, maxChars) + "...";
}
}

用法：

<Component Text="SomeLongTextString"></Component>
// or if you want to change the max characters:
<Component Text="SomeLongTextString" MaxCharacters="350"></Component>