[英]How to make text break into new line if it's longer than container
我在离子卡上有一行文字,每次都会有不同的长度。 我需要能够告诉文本何时到达卡的末尾(在ios和android上 - 可以有一个更小的屏幕),所以我可以把它分成一个新行。
这就是卡片的样子:
<ion-card>
<ion-item>
<p><i>On:</i><span id="showName">{{event.showName}}</span></p>
<p><i>At:</i><span id="venueName">{{event.venue}}</span></p>
</ion-item>
<ion-card>
更新我尝试了第一个答案建议,并将断字溢出包装添加到css但它不起作用。 我还需要帮忙。
#showName{
display: inline;
overflow-wrap: break-word;
font-size: 2rem;
font-weight: 800;
word-spacing: -2px
}
也许你应该使用css作为展示用品:
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
overflow-wrap:break-word;
您的内容将自动包装到ion-label
。 这个元素有默认的css是: white-space: nowrap
。 你需要覆盖它:
.label{
white-space: normal !important;
}
<ion-grid>
<ion-row>
<ion-col col-12>
<ion-item>
<p><i>On:</i><span id="showName">{{event.showName}}</span></p>
<p><i>At:</i><span id="venueName">{{event.venue}}</span></p>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
在“ion-card”标签内,放入此代码并尝试运行。 它会将您的文本限制在该特定区域。
Ionic有一个CSS实用程序text-wrap
: https : //ionicframework.com/docs/theming/css-utilities/
从而:
<ion-card>
<ion-item>
<p text-wrap><i>On:</i><span id="showName">{{event.showName}}</span></p>
<p text-wrap><i>At:</i><span id="venueName">{{event.venue}}</span></p>
</ion-item>
<ion-card>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.