Question

我有这个：

   <h6 class="text-center" 
    style="white-space: pre-line; word-break: keep-all;">
    <strong>Bill Date: </strong> {{billSummaryObj.bill_date || '--'}}
   </h6>

日期在连字符后中断。在-连字符之后，日期的其余部分转到下一行。如何使整个日期移到下一行

Answer 1

您可以在<wbr>之后使用</strong>，这是一个中断，仅在需要时才会发生。

我不确定white-space或word-break是否会干扰<wbr>的工作方式，因此您可能必须将其关闭才能正常工作。

Answer 2

在日期上使用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%的宽度。

如果没有空格，请换行

2 个答案: