文本上的 CSS NoWrap [重复]

Posted 2023-03-07

【中文标题】文本上的 CSS NoWrap [重复]

【英文标题】：CSS NoWrap on Text [duplicate]

【发布时间】：2018-07-12 19:37:24

【问题描述】：

我有一张卡片，里面有一堆文字。其中一些很长，并且像这样被强制到下一行，

我希望文本保留在一行上，并在必要时为工具提示变成省略号。所以就像'拒绝回答......'等

我目前使用 flex 和 angular-material 来设置它。

我尝试过的事情：

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

【问题讨论】：

由于您使用 Flexbox，我将重复的链接更改为可以解释更多内容的链接，而不仅仅是 text-overflow: ellipsis 所做的。

【参考方案1】：

为您的文本尝试 CSS 属性 text-overflow: ellipsis;

【参考方案2】：

你可以这样做：

.text 
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  width: 100%;
  min-width: 1px;

【讨论】：

文本不再溢出，但省略号不显示。

我已经编辑了我的答案。请尝试一下！