多行分裂句(Bootstrap 4+ Mobile)

Question

我有一个文本(句子)，是充分显示在桌面版本。不过，我想把这句话分成2-3行，在MobilewithBootstra-4中。

例如，我有以下文本(可以是h1或p标记)

我们的大型，重型和同天交货项目是由我们的商店或我们的送货伙伴之一交付。

我想为Mobile3次，在这些特定的词/位置.

我们的大型，重型和同天交货项目是由我们的商店或我们的送货伙伴之一交付。

我有什么选择？再说一遍，这可能是在h1或p标签中，如果不适合所有的解决方案，请提供帮助。

谢谢!

Answer 1

只需添加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>标记。还可以使用特定的类将此效果限制在用例上。

Answer 2

在这个级别上处理文本是相当困难的，因为您无法访问浏览器文本引擎。关于如何实现这一点，我的最佳猜测是有2个标记，而您希望在桌面上显示的是

<h1 class="d-sm-none d-xs-none"> Our large, heavy items and Same-Day Delivery items are delivered by our store or one of our delivery partners.</h1>
<h1 class="d-none d-sm-block d-xs-block">Our large, heavy items and Same-Day Delivery items<br>
are delivered by our store<br>
or one of our delivery partners.</h1>

我不确定这些是否是正确的类和有2个h1标签是不好的SEO，但这可能是一个方法，你可以做到这一点。有点简陋，但应该能用。

Answer 3

您可以将它们包装在一个div中并使用flexbox管理它，当屏幕的宽度小于h1或p上下文时，它将自动推送到下一行。