[英]How to make text break into new line if it's longer than container
I have a line of text on an ion-card that will have a varying length every time. 我在离子卡上有一行文字,每次都会有不同的长度。 I need to be able to tell when the text has reached the end of the card (on both ios and android - which can have an even smaller screen) so I can break it into a new line.
我需要能够告诉文本何时到达卡的末尾(在ios和android上 - 可以有一个更小的屏幕),所以我可以把它分成一个新行。
this is what the card looks like: 这就是卡片的样子:
<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>
UPDATE I tried the first answer suggestion and added the break-word overflow wrap to css but it didn't work. 更新我尝试了第一个答案建议,并将断字溢出包装添加到css但它不起作用。 I still need hel.
我还需要帮忙。
#showName{
display: inline;
overflow-wrap: break-word;
font-size: 2rem;
font-weight: 800;
word-spacing: -2px
}
Maybe you should use css, for display purpouses: 也许你应该使用css作为展示用品:
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
overflow-wrap: break-word;
overflow-wrap:break-word;
Your content will be automatically wrapped into an ion-label
. 您的内容将自动包装到
ion-label
。 This element have default css is: white-space: nowrap
. 这个元素有默认的css是:
white-space: nowrap
。 You need to overide it: 你需要覆盖它:
.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>
inside "ion-card" tag, put this code and try to run. 在“ion-card”标签内,放入此代码并尝试运行。 It will restrict your text to that particular area only.
它会将您的文本限制在该特定区域。
Ionic have a CSS utility text-wrap
: https://ionicframework.com/docs/theming/css-utilities/ Ionic有一个CSS实用程序
text-wrap
: https : //ionicframework.com/docs/theming/css-utilities/
Thus: 从而:
<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.