Question

我的表格中有句：

Bill and Amount.

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

Bill and
Amount

但是我想在一个新的行中输入和这个词：

Bill
and Amount

没有<br>有没有办法做到这一点，也许是以某种方式自定义CSS类？

Answer 1

你可以像这样使用不易碎的空间：

＆＃13;

Bill and&nbsp;Amount.

＆＃13;

Answer 2

您可以使用wbr（分词机会）并在元素上设置white-space: nowrap：

＆＃13;

div {
  white-space: nowrap;
}

＆＃13;

<div>
  Bill<wbr> and Amount
</div>

＆＃13;

Answer 3

实现此目的的另一种方法是使用媒体查询。

在小型设备上（少于768px）'和Amount'将突破新线。在较大的设备上（最小宽度为768px），它将在一行显示全部。

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

Bill <span>and Amount</span>

span {
    display: block;
}

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