CSS NoWrap on Text

Question

I have a card with a bunch of text inside of it. Some of this is lengthy and it is forced onto the next line like this,

I'd like for the text to remain on one line, and become an ellipsis if necessary for a tooltip. So like 'Declined to ans...' etc

I've used flex and angular-material to set this up currently.

Things I have tried:

Setting the following css properties:

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

This will make the text no longer overflow, but the ellipsis isn't applied.

Here is the HTML

<div *ngIf="profile" fxLayout="row" style="justify-content: space-evenly;">
......
 <div fxLayout="column" style="flex-basis: 75%; margin-right: 10px;">
        <mat-card class="card-info" style="flex: 1.5;">
            <div class="mat-card-header-text">Personal Information</div>
            <mat-card-content class="flex-and-justify-between">
                <div fxLayout="column" style="padding: 5px;">
                    <label class="info-heading">Date of Birth</label>
                    <label>{{profile.dateOfBirth | date }}</label>
                    <label class="info-heading info-heading-padded">Sexuality</label>
                    <label>{{profile.sexuality.value}}</label>
                    <label class="info-heading info-heading-padded">Previous Offender</label>
                    <label>{{profile.previousOffender}}</label>
                </div>

                <div fxLayout="column">
                    <label class="info-heading">Gender</label>
                    <label>{{profile.gender}}</label>
                    <label class="info-heading info-heading-padded">Gender Identity</label>
                    <label>{{profile.genderIdentity.value}}</label>
                    <label class="info-heading info-heading-padded">Date of First Visit</label>
                    <label>22/01/2018</label>
                </div>
                <div fxLayout="column">
                    <label class="info-heading">Postcode</label>
                    <label>{{profile.postcode}}</label>
                    <label class="info-heading info-heading-padded">Location</label>
                    <label>{{profile.location.value}}</label>
                    <label class="info-heading info-heading-padded">Employment Status</label>
                    <label>{{profile.employmentStatus.value}}</label>
                </div>

                <div fxLayout="column">
                    <label class="info-heading">Ethnicity</label>
                    <label>{{profile.ethnicity.value}}</label>
                    <label class="info-heading info-heading-padded">Sex Worker</label>
                    <label>{{profile.sexWorker}}</label>
                </div>

            </mat-card-content>
        </mat-card>
</div>

Here is the CSS:

.card {
    padding: 0;
    width: 225px;
    margin: 15px 15px 0 15px;
}

.card-initials {
    display: flex;
    flex-wrap: nowrap;
    background-color: #D3DCE5;
    border-bottom: #afbfd0 1px solid;
}

.card-initials span {
    text-align: center;
    width: inherit;
    line-height: 225px;
    font-size: 72px;
}

.card-info {
    margin-top: 15px;
}

.mat-card-header-text {
    margin: 0;
    margin-bottom: 10px;
    font-weight: bold;
}

.info-heading {
    color: #728ba7;
}

.info-heading-padded {
    padding-top: 13px;
}

.mat-card-header-text a {
    float: right;
    font-weight: normal;
    font-size: 12px;
    text-decoration: none;
    color: #58708d;
}

.tooltip {
    fill: #333333;
}

Since you use Flexbox, I changed the duplicate links to one that does explain that more, than just what `text-overflow: ellipsis` does. — Asons, Feb 02 '18 at 10:23

score 49 · Answer 1 · edited May 31 '21 at 16:50

49

You can do it like this:

.text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  width: 100%;
  min-width: 1px;
}

edited May 31 '21 at 16:50

BinaryButterfly

18,137
13
50
91

answered Feb 02 '18 at 10:15

dshukertjr

15,244
11
57
94

The text no longer overflows, but the ellipsis doesn't show. – Ben Donnelly Feb 02 '18 at 10:18
I have edited my answer. Please try it out! – dshukertjr Feb 02 '18 at 10:42

score 3 · Answer 2 · answered Feb 02 '18 at 10:14

3

Try the CSS property text-overflow: ellipsis; for your text

answered Feb 02 '18 at 10:14

Cocoduf

147
8

CSS NoWrap on Text

2 Answers2