如果没有空格,请换行

时间:2019-05-14 07:01:51

标签: html css

我有这个:

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

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

2 个答案:

答案 0 :(得分:0)

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

我不确定white-spaceword-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%的宽度。