How to set multi-line text within an Angular chip

This article explains how to set multi-line text within an Angular chip.

Step 1: Implement Chip component using our getting started documentation.

Step 2: To achieve multiline text, you can utilize the Angular Chips cssClass property by setting the required height and width for the chip and using pre-wrap CSS style. This enables you to have the multiple lines as text in the chip component.

[app.component.html]

<div class="sample-padding">
    <ejs-chiplist id="chip-default">
        <e-chips>
            <e-chip  [text]='content' cssClass="custom"></e-chip>
        </e-chips>
    </ejs-chiplist>
</div>
 
…
<style>
.custom {
    width: 100px !important;
    height: 50px !important;
}
.e-chip-text {
    white-space: pre-wrap !important;
}
</style>

[app.component.ts]

…
public content = "Breaking the line"
…

Screenshot:

Refer to the working sample for additional details and implementation: [Sample]