Html 文本上的 CSS NoWrap
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48580360/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS NoWrap on Text
提问by Ben Donnelly
I have a card with a bunch of text inside of it. Some of this is lengthy and it is forced onto the next line like this,
我有一张卡片，里面有一堆文字。其中一些很长，它被迫像这样进入下一行，
I'd like for the text to remain on one line, and become an ellipsis if necessary for a tooltip. So like 'Declined to ans...' etc
我希望文本保留在一行上，并在必要时成为工具提示的省略号。所以像“拒绝回答......”等
I've used flex and angular-material to set this up currently.
我目前使用 flex 和 angular-material 来设置它。
Things I have tried:
我尝试过的事情：
Setting the following css properties:
设置以下 css 属性：
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
This will make the text no longer overflow, but the ellipsis isn't applied.
这将使文本不再溢出，但不会应用省略号。
Here is the HTML
这是 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>
Here is the CSS:
这是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;
}
回答by dshukertjr
You can do it like this:
你可以这样做：
.text{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display:block;
width:100%;
min-width:1px;
}
回答by Cocoduf
Try the CSS property text-overflow: ellipsis;for your text
text-overflow: ellipsis;为您的文本尝试 CSS 属性
