Обрезать текст в ячейке MudTable
Как я могу указать MudTable обрезать текст в ячейке вместо того, чтобы позволить тексту переноситься на следующую строку?
Вот пример кода
<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"});
}
}
Как преобразовать описание конечного элемента из обернутого текста в что-то вроде «Описание 4 — это…».
Я нашел CSS, который допускает разрывы слов, но не поддерживает усечение.
Есть идеи? Могу ли я что-то добавить на уровне проекта, что может наследовать каждая таблица?
Вот детская площадка https://try.mudblazor.com/snippet/mkmSaevAnmAsvCEE
Ответы 2
Вы можете проверить длину описания и отобразить подстроку.
<RowTemplate>
<MudTd>@context.Name</MudTd>
<MudTd>
@if (context.Description.Length > 5)
{
@($"{context.Description.Substring(0, 5)}...")
}
else
{
@context.Description
}
</MudTd>
</RowTemplate>
Для этого вы можете стилизовать элемент <MudTd>.
<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 Style = "max-width: 1px;overflow-wrap: break-word;white-space: nowrap;overflow: hidden;">@context.Description</MudTd>
</RowTemplate>
</MudTable>
Это стили CSS, которые вам нужны, чтобы полностью игнорировать текст, если он переполняется.
Примечание: максимальная ширина должна быть >= 0.
{
max-width: 1px;
overflow-wrap: break-word;
white-space: nowrap;
overflow: hidden;
}
Или, если вы хотите, чтобы ячейка была прокручиваемой, тогда: -
overflow-y: hidden;
// or
overflow: auto;
Демо 👉Фрагмент MudBlazor
Отлично - это именно то, что я хотел. Есть ли способ изменить стиль CSS, чтобы он повлиял на каждую таблицу в моем проекте? Спасибо за ответ. Удивительный.
Вы можете переопределить класс css стилями для MudTh, которые добавляет MudBlazor. Либо используйте инструменты браузера, либо посмотрите их репозиторий, чтобы узнать, какие классы применяются.
<стиль> .mud-table-cell { максимальная ширина: 1 пиксель; overflow-wrap: прерывание-слово; пробел: nowrap; переполнение: скрыто; } </style> Если кто-то ищет, как сделать его глобальным
Спасибо, это работает, но мне нужно учитывать размер ячейки на экране, чтобы максимально увеличить количество отображаемых символов. Спасибо за предложение.