Html 文本上的CSS NoWrap

我有一张卡片，里面有一串文字。其中有些内容很长，它被强制放到下一行，就像这样

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

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

我尝试过的事情：

设置以下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属性

文本溢出：省略号对于您的文本
您可以这样做：

.text{
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
显示：块；
宽度：100%；
最小宽度：1px；
}
文本不再溢出，但省略号不显示。我已编辑了我的答案。请试一试！由于您使用Flexbox，我将重复链接更改为一个能够解释更多内容的链接，而不仅仅是
文本溢出：省略号所做的。
.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;
}