我有这个:
<h6 class="text-center"
style="white-space: pre-line; word-break: keep-all;">
<strong>Bill Date: </strong> {{billSummaryObj.bill_date || '--'}}
</h6>
日期在连字符后中断。在-连字符之后,日期的其余部分转到下一行。如何使整个日期移到下一行
答案 0 :(得分:0)
您可以在<wbr>
之后使用</strong>
,这是一个中断,仅在需要时才会发生。
我不确定white-space
或word-break
是否会干扰<wbr>
的工作方式,因此您可能必须将其关闭才能正常工作。
答案 1 :(得分:0)
在日期上使用span
标签,在h6
上使用css Flex。
.d-flex {
display: flex;
}
.justify-content-center {
justify-content: center;
}
.flex-wrap {
flex-wrap: wrap;
}
/* you may not need this */
.w-100 {
width: 100%;
}
<h6 class="d-flex flex-wrap justify-content-center w-100">
<strong> Bill Date: </strong>
<span>{{billSummaryObj.bill_date || '--'}}</span>
</h6>
如果您希望日期显示在自己的行上,而与可用空间无关,请为<strong>
设置100%
的宽度。