Html 在CSS中如何在特定字符之前断开句子

我的表格中有一句话：

Bill and Amount.

如果页面较窄，则文本如下所示：

Bill and
Amount

但我想用一个新的词，比如：

Bill
and Amount

---

没有

，或者使用某种自定义CSS类，有什么方法可以做到这一点吗？

您可以像这样使用不可破坏的空间：

账单和金额。

您可以使用（word break opportunity）并在元素上设置

空白：nowrap

：

div{
空白：nowrap；
}

账单和金额

实现这一点的另一种方法是使用媒体查询

在小型设备（小于768px）上，“和数量”将在新线上中断。在较大的设备（最小宽度768px）上，它将在一行上显示所有内容

显然，您可以将媒体查询更改为您喜欢的任何内容

账单和金额
跨度{
显示：块；
}
@介质（最小宽度：768px）{
跨度{
显示：内联；
}
}

Bill <span>and Amount</span>

span {
    display: block;
}

@media (min-width: 768px) {
    span {
        display: inline;
    }
}