时间戳

首页 > 解决方案 > 在多行中拆分句子（Bootstrap 4 + Mobile）

html - 在多行中拆分句子（Bootstrap 4 + Mobile）

问题描述

我有一个在桌面版中完全显示的文本（句子）。但是，我想在 Mobile 中使用 Bootstrap-4 将句子分成 2-3 行。

例如，我有以下文本（可能是 h1 或 p 标签）

我们的大型、重型物品和当日送达物品由我们的商店或我们的配送合作伙伴之一配送。

我想在这些特定的单词/位置上打破 Mobile 3 次......

Our large, heavy items and Same-Day Delivery items
are delivered by our store
or one of our delivery partners.

我有什么选择？ 再一次，这可能在h1或p标签中，如果一个不适合所有解决方案，请帮助解决每个解决方案。

谢谢！

标签： htmlcssbootstrap-4

解决方案

只需添加spans，然后使用媒体查询使它们block在移动设备上加载。

比如...

<div id="coolDiv">
 <span>Our large, heavy items and Same-Day Delivery items <span/><span>are delivered by our store </span><span>or one of our delivery partners.</span>
</div>

CSS：

@media (max-width: 768px) {
  #coolDiv span {
    display: block;
  }
}

演示

这将适用于您提到的喜欢<h1>或<p>标签的所有情况。您还可以使用特定的类来将此效果限制在您的用例中。

推荐阅读