Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

Truncate text in a MudTable cell

$
0
0

How can I instruct a MudTable to truncate text in a cell instead of allowing the text to wrap onto the next line?

Here is a code sample

<MudTable Items="@data"><ColGroup><col style="width: 80%" /><col style="width: 20%" /></ColGroup><HeaderContent><MudTh>Name</MudTh><MudTh>Description</MudTh></HeaderContent><RowTemplate><MudTd>@context.Name</MudTd><MudTd>@context.Description</MudTd></RowTemplate></MudTable>@code {    public string Text { get; set; } = "????";    public string ButtonText { get; set; } = "Click Me";    public int ButtonClicked { get; set; }    public class TableStructure    {        public string Name { get; set; } = string.Empty;        public string Description { get; set; } = string.Empty;    }    private List<TableStructure> data = new();    protected override void OnInitialized()    {        data.Add(new() { Name = "Name1", Description = "Description 1"});        data.Add(new() { Name = "Name2", Description = "Description 2"});        data.Add(new() { Name = "Name3", Description = "Description 3"});        data.Add(new() { Name = "Name4", Description = "Description 4 - This is a really long description that is the problem"});    }}

How do I convert the description for the final item from the wrapped text to something like " Description 4 - this is......."

I've found css that allows word breaks but nothing that supports truncating.

Any ideas? Is there something I can add at a project level that each table can inherit?

Here is a playgroundhttps://try.mudblazor.com/snippet/mkmSaevAnmAsvCEE


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>