<li>文本的结尾放到下一行

Question

我正在使用需要使用移动设备的列表。当我缩小窗口宽度时，大多数li元素随页面缩小，但“SETUP”正在下降。我正在使用bootstrap。

.dollar {
  font-size: 20px;
  font-weight: 600;
  vertical-align: top;
  position: relative;
  top: 17px;
}

.price {
  font-size: 83px;
  line-height: 1em;
  padding: 0 3px;
  font-weight: 200;
  vertical-align: middle;
  margin-right: -15px;
}

.price.in.table2 {
  margin-bottom: 20px;
}

.price.in.table2 span {
  color: #262626;
}

<ul>
<li>
  <div class="price in table2">
    <sup class="dollar">$</sup>
    <span class="price">5000</span>
    <span class="afterprice">/ ONE-TIME SETUP</span>
  </div>
</li>
</ul>

Answer 1

您可以在white-space: nowrap中使用<li>或.price代码中使用css类<div>。

Answer 2

您可以设置空白属性，但如果它没有包装它将溢出其容器，这从设计角度来看更糟糕。您最好减少媒体查询中的字体大小，以便在最小的断点处不会发生。