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"> ...... <div fxLayout="column"> <mat-card> <div>Personal Information</div> <mat-card-content> <div fxLayout="column"> <label>Date of Birth</label> <label>{{profile.dateOfBirth | date }}</label> <label>Sexuality</label> <label>{{profile.sexuality.value}}</label> <label>Previous Offender</label> <label>{{profile.previousOffender}}</label> </div> <div fxLayout="column"> <label>Gender</label> <label>{{profile.gender}}</label> <label>Gender Identity</label> <label>{{profile.genderIdentity.value}}</label> <label>Date of First Visit</label> <label>22/01/2018</label> </div> <div fxLayout="column"> <label>Postcode</label> <label>{{profile.postcode}}</label> <label>Location</label> <label>{{profile.location.value}}</label> <label>Employment Status</label> <label>{{profile.employmentStatus.value}}</label> </div> <div fxLayout="column"> <label>Ethnicity</label> <label>{{profile.ethnicity.value}}</label> <label>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; } 2 Answers
You can do it like this:
.text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; width: 100%; min-width: 1px; } Try the CSS property text-overflow: ellipsis; for your text
