.Net 5 Blazor WASM只想在表列中显示字符串的一部分

.Net 5 Blazor WASM只想在表列中显示字符串的一部分,blazor,blazor-webassembly,blazor-client-side,.net-5,Blazor,Blazor Webassembly,Blazor Client Side,.net 5,我正在构建一个.NET5BlazorWASM项目,我在表中显示的其中一列的长度可以达到4000个字符。我想对它进行子串,但不断出现错误。以下代码运行良好,但列(说明)太大了: @if ((definitions == null) || (!definitions.Any())) { <p>Loading Definitions...</p> } else { <table class="table table-striped"&

我正在构建一个.NET5BlazorWASM项目,我在表中显示的其中一列的长度可以达到4000个字符。我想对它进行子串,但不断出现错误。以下代码运行良好,但列(说明)太大了:

@if ((definitions == null) || (!definitions.Any()))
{
    <p>Loading Definitions...</p>
}
else
{
     <table class="table table-striped">
         <thead>
             <tr>
                 <th>Name</th>
                 <th>Description</th>
                 <th>Parameters</th>
                 <th>Created</th>
                 <th>Modified</th>
             </tr>
         </thead>
         <tbody>
             @foreach(var def in definitions)
             {
                 <tr>
                     <td>@def.Name</td>
                     <td>@def.Description</td>
                     <td>@def.Parameters</td>
                     <td>@def.CreatedOnUtc</td>
                     <td>@def.ModifiedOnUtc</td>
                 </tr>
             }
         </tbody>
     </table>
}
@if((definitions==null)| |(!definitions.Any())
{
正在加载定义

} 其他的 { 名称 描述 参数 创建 被改进的 @foreach(定义中的var def) { @定义名称 @定义.说明 @定义参数 @def.CreatedOnUtc @def.ModifiedOnUtc } }
我尝试了以下两种方法,但在导航到该页面时出现错误:

<td>@def.Description.Substring(0,40)</td>  
<td>@def.Description.ToString().Substring(0,40)</td>
@def.Description.Substring(0,40)
@def.Description.ToString()子字符串(0,40)

非常感谢您的帮助。

您可以使用css截断单元格中的文本

   @page "/"

@if ((definitions == null) || (!definitions.Any()))
{
    <p>Loading Definitions...</p>
}
else
{
     <table class="table table-striped">
         <thead>
             <tr>
                 <th>Name</th>
                 <th>Description</th>
                 <th>Parameters</th>
                 <th>Created</th>
                 <th>Modified</th>
             </tr>
         </thead>
         <tbody>
             @foreach(var def in definitions)
             {
                 <tr>
                     <td>@def.Name</td>
                     <td class="description-cell"><div class="ellipsis">@def.Description</div></td>
                     <td>@def.Parameters</td>
                     <td>@def.CreatedOnUtc</td>
                     <td>@def.ModifiedOnUtc</td>
                 </tr>
             }
         </tbody>
     </table>
}

@code{
   List<def> definitions = new List<def>();

       protected override void OnInitialized(){
            definitions.Add(new def{ Name="Name 1", Description="now is the time for all good men to come to the aide of their party, now is the time for all good men to come to the aide of their party, now is the time for all good men to come to the aide of their party"});
            definitions.Add(new def{ Name="Name 2", Description="The quick brown fox jumped over the lazy dog"});
       }

    public class def{
        public string Name{get;set;}
        public string Description {get;set;}
        public string Parameters {get;set;}
        public string CreatedOnUtc {get;set;}
        public string ModifiedOnUtc {get;set;}
     }  
}

<style>

td.description-cell {
   max-width: 15em;
}
div.ellipsis {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
</style>
@page/“
@如果((definitions==null)| |(!definitions.Any()))
{
正在加载定义

} 其他的 { 名称 描述 参数 创建 被改进的 @foreach(定义中的var def) { @定义名称 @定义.说明 @定义参数 @def.CreatedOnUtc @def.ModifiedOnUtc } } @代码{ 列表定义=新列表(); 受保护的覆盖无效OnInitialized(){ 定义.添加(新定义{Name=“Name 1”,Description=“现在是所有好人来帮助他们的政党的时候,现在是所有好人来帮助他们的政党的时候,现在是所有好人来帮助他们的政党的时候”}); definitions.Add(新定义{Name=“Name 2”,Description=“敏捷的棕色狐狸跳过了懒狗”}); } 公共类定义{ 公共字符串名称{get;set;} 公共字符串说明{get;set;} 公共字符串参数{get;set;} 公共字符串CreatedOnUtc{get;set;} 公共字符串ModifiedOnUtc{get;set;} } } td.1-cell{ 最大宽度:15em; } 省略号{ 空白:nowrap; 溢出:隐藏; 文本溢出:省略号; }
您需要向单元格中添加一个div,并将椭圆类应用于该div,然后可以设置单元格的宽度,椭圆将截断字符串


你可以在这里玩

你会犯什么错误?