CODEWITHSUNDEEP
htmlcssangular-materialoverflowstyling
Antonio Santoro
Antonio Santoro

Reputation: 907

Handling card overflow text

I have this card container to display some text that is overflowing

enter image description here

I need the text to be wrapped inside the card container and the container to adjust it height to show all wrapped text.

I already tried to use options like overflow-wrap, word-wrap, white-space without success, the text will not break and fill the below white space.

The card is a mat-card from the Angular Material library.

EDIT: html code of the component

<mat-card>

    <mat-card-content>
        <mat-list>
            <mat-list-item>
                <mat-icon matListIcon>tag</mat-icon>
                <p matLine> <b> ID </b> </p>
                <p matLine>
                    <span matLine> id </span>
                </p>
            </mat-list-item>

            <mat-list-item>
                <mat-icon matListIcon>edit_attributes</mat-icon>
                <p matLine> <b>TYPE</b> </p>
                <p matLine>
                    <span> type </span>
                </p>
            </mat-list-item>

            <mat-list-item>
                <mat-icon matListIcon>games</mat-icon>
                <p matLine> <b>CONTROLLER</b> </p>
                <p matLine>
                    <span> controller </span>
                </p>
            </mat-list-item>

            <mat-list-item>
                <mat-icon matListIcon>vpn_key</mat-icon>
                <p matLine> <b>PUBLIC KEY</b> </p>
                <p matLine>
                    <span> 7te19UzPj9VUeTF23LK65Ta08W7i13uw60Py1D0oP2b43F17f0P41DU39805F34305w4rg545f6EO48y5KFgh9M618231813E67az681I04UkkH3ti4x4s8809HMS474K9t7XJ29Hm033W51DD77403sn4Uw4h897R91J59IjDdXQ3WSej3v448FXEr8T56uN9UWWs3m86if68Q3c4c2M35hv4FOgZC5MlDNNBngyj9o7nWY5B76Gv785E9dW9484724743XK2BI5H1ZR1h55s9750L3FH54645415D4N71srWk8q51b272k408Y22gXPS1K527V27XH33pW8eR516v8sj6ZS93ss39Z5540MyKu0OA2SA5pQ57L30G19909Sh73uv899x555DGd311m73u519kPqd3gBb39s6AG2b73iO7835C2elW5R81csn617L6yZ8Z357x6QS4Slo67i9ZUrEMx69nh12K96474oXx03nf79Qj9 </span>
                </p>

            </mat-list-item>
        </mat-list>

    </mat-card-content>

</mat-card>

EDIT2:

Using

span {
  word-break: break-all;
  border: 1px solid red;
  display: inline-block;
}

will not help as it won't break the long text line

enter image description here

The solution here will break the spacings

enter image description here

Upvotes: 0

Views: 2518

Answers (2)

Rob Moll
Rob Moll

Reputation: 3453

word-break: break-all will handle that:

span {
  word-break: break-all;
  border: 1px solid red;
}
<span> 7te19UzPj9VUeTF23LK65Ta08W7i13uw60Py1D0oP2b43F17f0P41DU39805F34305w4rg545f6EO48y5KFgh9M618231813E67az681I04UkkH3ti4x4s8809HMS474K9t7XJ29Hm033W51DD77403sn4Uw4h897R91J59IjDdXQ3WSej3v448FXEr8T56uN9UWWs3m86if68Q3c4c2M35hv4FOgZC5MlDNNBngyj9o7nWY5B76Gv785E9dW9484724743XK2BI5H1ZR1h55s9750L3FH54645415D4N71srWk8q51b272k408Y22gXPS1K527V27XH33pW8eR516v8sj6ZS93ss39Z5540MyKu0OA2SA5pQ57L30G19909Sh73uv899x555DGd311m73u519kPqd3gBb39s6AG2b73iO7835C2elW5R81csn617L6yZ8Z357x6QS4Slo67i9ZUrEMx69nh12K96474oXx03nf79Qj9 </span>

Added display: inline-block: 

span {
  word-break: break-all;
  border: 1px solid red;
  display: inline-block;
}
<span> 7te19UzPj9VUeTF23LK65Ta08W7i13uw60Py1D0oP2b43F17f0P41DU39805F34305w4rg545f6EO48y5KFgh9M618231813E67az681I04UkkH3ti4x4s8809HMS474K9t7XJ29Hm033W51DD77403sn4Uw4h897R91J59IjDdXQ3WSej3v448FXEr8T56uN9UWWs3m86if68Q3c4c2M35hv4FOgZC5MlDNNBngyj9o7nWY5B76Gv785E9dW9484724743XK2BI5H1ZR1h55s9750L3FH54645415D4N71srWk8q51b272k408Y22gXPS1K527V27XH33pW8eR516v8sj6ZS93ss39Z5540MyKu0OA2SA5pQ57L30G19909Sh73uv899x555DGd311m73u519kPqd3gBb39s6AG2b73iO7835C2elW5R81csn617L6yZ8Z357x6QS4Slo67i9ZUrEMx69nh12K96474oXx03nf79Qj9 </span>

Upvotes: 1

Rakesh K
Rakesh K

Reputation: 1320

Try doing following:

Give a class to span which holding the text. Suppose you gave class named .token then in css do this.

::ng-deep .token {
      word-break: break-all;
}

Upvotes: 0

Related Questions