CSS NoWrap on Text

0 votes

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,

enter image description here

I'd like for the text to remain on one line, and become an ellipsis if necessary for a tooltip. So like 'Declined to answer...' 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;
}
Jul 4 in CSS by Edureka
• 9,940 points
12 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In CSS

0 votes
1 answer

How do I give text or an image a transparent background using CSS?

Use either a semi-transparent PNG or SVG ...READ MORE

answered May 27 in CSS by Edureka
• 9,540 points
38 views
0 votes
1 answer

How to insert spaces/tabs in text using HTML/CSS

For spaces, use &nbsp;, for (less than, ...READ MORE

answered Jun 1 in CSS by Edureka
• 9,540 points
26 views
0 votes
1 answer

CSS text-overflow: ellipsis; not working?

So, if you've arrived at this question ...READ MORE

answered Jun 10 in CSS by Edureka
• 9,540 points
382 views
0 votes
1 answer

Splide.js text animation between slides with animate.css classes

The event callback functions contain an event ...READ MORE

answered Jun 10 in CSS by Edureka
• 9,540 points
171 views
0 votes
1 answer

CSS Border on PNG image with transparent parts

 There is a way to accomplish this ...READ MORE

answered Jun 13 in CSS by Edureka
• 9,540 points
280 views
0 votes
1 answer

Creating a Zoom Effect on an image on hover using CSS?

Try using the following code: <style> .zoom { ...READ MORE

answered Jun 17 in CSS by Edureka
• 9,540 points
48 views
0 votes
1 answer

Why vh works and % doesn't? (height css)

The height of an element, by default, ...READ MORE

answered Jun 10 in CSS by Edureka
• 9,540 points
54 views
0 votes
1 answer

Controlling the amount of space in justify-content: space-between

The justify-content property positions flex items on ...READ MORE

answered Jun 28 in CSS by Edureka
• 9,540 points
23 views
0 votes
0 answers

CSS - display elements in columns

Is there a way (maybe flex, I ...READ MORE

Jul 8 in CSS by Edureka
• 9,940 points
17 views
0 votes
1 answer

CSS-only masonry layout

A masonry feature is included in CSS ...READ MORE

answered Aug 8 in CSS by Tanishqa
• 700 points
12 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP