如何解决服务器端火焰中的省略号
如何在服务器端的blazor中得到省略号?因此,如果显示的文字长度为200个字符,则要求截断并显示“显示更多”链接,但是如果用户决定单击“显示更多”,则必须渲染整个文本。
注意:
- 不想使用CSS
我刚接触blazor,但是进行了一些研究并且无法找到任何东西。
解决方法
这是我创建的快速组件,可以使用。
演示: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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。