文本上的CSS NoWrap[重复]

Question

我有一张卡片，里面有一堆文字。有些是冗长的，它被迫像这样放在下一行，

我希望文本保持在一行，并在必要时成为工具提示的省略号。就像“拒绝回答…”等

目前我已经使用了弯曲和角度材质来进行设置。

我尝试过的事情：

设置以下css属性：

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

这将使文本不再溢出，但省略号不会应用。

这是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>

这里是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;
}

Answer 1

尝试CSS属性文本溢出：省略号 用于您的文本

Answer 2

您可以这样做：

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