.Net 5 Blazor WASM 只想在表格列中显示部分字符串答案

【问题标题】：.Net 5 Blazor WASM want to show only part of string in table column.Net 5 Blazor WASM 只想在表格列中显示部分字符串
【发布时间】：2021-02-16 22:40:47
【问题描述】：

我正在构建一个 .Net 5 Blazor WASM 项目，并且我在表格中显示的列之一最长可达 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>
}

我已经尝试了以下两种方法，但在导航到该页面时出现错误：

<td>@def.Description.Substring(0,40)</td>  
<td>@def.Description.ToString().Substring(0,40)</td>

任何帮助表示赞赏。

【问题讨论】：

你得到什么错误？

标签： blazor blazor-webassembly blazor-client-side .net-5

【解决方案1】：

您可以使用 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>

您需要在单元格中添加一个 div 并将椭圆类应用于该 div，然后您可以设置单元格的宽度，椭圆将截断字符串。

你可以在这里玩https://blazorfiddle.com/s/ja9anekp

【讨论】：