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

Question

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

感谢任何帮助。

Answer 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 并将椭圆 class 应用于该 div 然后您可以设置单元格的宽度，椭圆将截断字符串.

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

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

.Net 5 Blazor WASM want to show only part of string in table column

blazor

.net-5

blazor-client-side

blazor-webassembly