个人中心
gpt4 book ai didi

html - 文本上的 CSS NoWrap

转载 作者：太空狗 更新时间：2023-10-29 13:57:17 24 4
gpt4 key购买 nike

<分区>

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

enter image description here

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

我目前使用 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;
}

24 4 0
文章推荐： git - 如果我删除其他人正在处理的远程分支会怎样？
文章推荐： iphone - Xcode 4，git 和 merge 项目文件!
文章推荐： git - 为什么 git svn 远程跟踪停止工作？
文章推荐： html - 是否可以仅使用 CSS 制作圆 Angular 三 Angular 形？
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com