服务器端 blazor 中的省略号

Question

如何在服务器端 blazor 中获取省略号？因此，要求是如果显示的文本长度为 200 个字符，则截断并显示“显示更多”link，但如果用户决定单击 'show more'.

，则呈现整个文本

注：

不想使用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>

服务器端 blazor 中的省略号

ellipsis in server side blazor

ellipsis

asp.net-core

blazor