hide long texts in the kanban card with ellipsis

[desmond]

I would like to hide long content texts in the kanban card with ellipsis. This does not mean restrict the content length. It is just to prevent showing a very long card in the board by adding ellipsis in the <div class="e-card-content"></div>. I know I can redefine the card template, but without doing that, can I restrict the length of the e-card-content part? I tried max-height="100px", but the last line was cut vertically in two halves. If I adjust that height to prevent that cutting to occur, the original padding at the bottom of the card is somewhat reduced, if the card has long texts. If there is no simple fix, I would like to know how the original template with content length limit looks like, which I guess is like:

<div class="e-card-header">...

<div class="e-card-content">...

<div class="e-card-footer style="font-size: 12px"> ...

[Ajithkumar Gopalakrishnan]

Hi Desmond,

Greetings from Syncfusion Support,

Based on your query, we understand that you would like to prevent long text content from expanding the Kanban card size and instead display the content with an ellipsis (...) when it exceeds the available space. To achieve this requirement, we suggest applying custom CSS to the card content element. Please refer to the following code snippet:

<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks">

    <KanbanColumns>

        <KanbanColumn HeaderText="Backlog" KeyField="@(new List<string>() { "Open" })"></KanbanColumn>

        <KanbanColumn HeaderText="In Progress" KeyField="@(new List<string>() { "InProgress" })"></KanbanColumn>

        <KanbanColumn HeaderText="Testing" KeyField="@(new List<string>() { "Testing" })"></KanbanColumn>

        <KanbanColumn HeaderText="Done" KeyField="@(new List<string>() { "Close" })"></KanbanColumn>

    </KanbanColumns>

    <KanbanCardSettings ShowHeader="false" HeaderField="Id" ContentField="Summary"></KanbanCardSettings>

</SfKanban>

<style type="text/css">

    .e-kanban .e-card-content {

        overflow: hidden;

        text-overflow: ellipsis;

        display: -webkit-box;

        -webkit-box-orient: vertical;

        -webkit-line-clamp: 3;

    }

</style>

Sample link: https://blazorplayground.syncfusion.com/embed/LDLRDQLqLzZNxQGs?appbar=true&editor=true&result=true&errorlist=true&theme=fluent2



For more details, please refer to the following User Guide documentation:

https://blazor.syncfusion.com/documentation/kanban/style

Please let us know if you need any further assistance.

Regards,
Ajithkumar G

[desmond]

Even your solution has the problem of the fourth line is halfly cut vertically. If I adjust the height of the card, it will make the bottom padding smaller. Thanks if you have some ways to make that bottom line disappear, I am ok with the default template.

[Ajithkumar Gopalakrishnan]

Hi Desmond,

Sorry for the inconvenience caused.

We previously provided a workaround to display an ellipsis (...) for long text content in Kanban cards. However, as you pointed out, the last line may still appear partially visible in some cases.

To resolve this case, we recommend using a custom card template together with custom CSS. This approach ensures that the text is properly truncated with an ellipsis and prevents any partially displayed text from appearing. Please refer to the following code snippet:

<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks">

    <KanbanColumns>

        <KanbanColumn HeaderText="Backlog" KeyField="@(new List<string>() { "Open" })"></KanbanColumn>

        <KanbanColumn HeaderText="In Progress" KeyField="@(new List<string>() { "InProgress" })"></KanbanColumn>

        <KanbanColumn HeaderText="Testing" KeyField="@(new List<string>() { "Testing" })"></KanbanColumn>

        <KanbanColumn HeaderText="Done" KeyField="@(new List<string>() { "Close" })"></KanbanColumn>

    </KanbanColumns>

    <KanbanCardSettings ShowHeader="false" HeaderField="Id" ContentField="Summary">

        <Template>

            @{

                TasksModel data = (TasksModel)context;

             }

            <div class="card-summary-wrapper">

                <div class="card-summary">

                    @data.Summary

                </div>

            </div>

        </Template>

    </KanbanCardSettings>

</SfKanban>

<style type="text/css">

    .card-summary-wrapper {

        overflow: hidden;

    }

 

    .card-summary {

        display: -webkit-box;

        -webkit-box-orient: vertical;

        -webkit-line-clamp: 3;

        overflow: hidden;

        text-overflow: ellipsis;

        line-height: 24px;

        max-height: 72px;

    }

</style>

Sample link: https://blazorplayground.syncfusion.com/embed/hNhxXGLzUndpxitr?appbar=true&editor=true&result=true&errorlist=true&theme=fluent2



Please let us know if you need any further assistance.

Regards,
Ajithkumar G