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, 2022 in CSS by Edureka
• 13,620 points
1,113 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, 2022 in CSS by Edureka
• 12,690 points
625 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, 2022 in CSS by Edureka
• 12,690 points
616 views
0 votes
1 answer

CSS text-overflow: ellipsis; not working?

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

answered Jun 10, 2022 in CSS by Edureka
• 12,690 points
4,655 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, 2022 in CSS by Edureka
• 12,690 points
2,823 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, 2022 in CSS by Edureka
• 12,690 points
6,746 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, 2022 in CSS by Edureka
• 12,690 points
1,829 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, 2022 in CSS by Edureka
• 12,690 points
1,788 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, 2022 in CSS by Edureka
• 12,690 points
4,455 views
0 votes
0 answers

CSS - display elements in columns

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

Jul 8, 2022 in CSS by Edureka
• 13,620 points
327 views
0 votes
1 answer

CSS-only masonry layout

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

answered Aug 8, 2022 in CSS by Tanishqa
• 1,170 points
1,420 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP