服务器端blazor中的省略号

Question

How do I get ellipsis in server side blazor? So the requirement is to truncate and display "show more" link if the displayed text is 200 characters long, but then do render the whole text if user decides to click 'show more'.

Note:

• Dont want to use css

I am new to blazor but have did some research and not been able to find something.

Answer 1

This is a quick component I created which you can use.

Demo: 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) + "...";
    }
}

Usage:

<Component Text="SomeLongTextString"></Component>

// or if you want to change the max characters:

<Component Text="SomeLongTextString" MaxCharacters="350"></Component>