中に大量のテキストが入ったカードがあります。これの一部は長く、次の行にこのように強制されます、
テキストが1行のままになり、ツールチップに必要な場合は省略記号になります。そのため、「ANSに拒否されました...」など
現在、これを設定するためにフレックスと角材を使用しました。
私が試したもの:
次の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;
}
次のようにできます:
.text{
overflow: hidden;
text-overflow: Ellipsis;
white-space: nowrap;
display:block;
width:100%;
min-width:1px;
}
CSSプロパティを試してくださいtext-overflow: Ellipsis;
あなたのテキスト