如何使用引导程序跨多个标签包装元素？答案

【问题标题】：How to use bootstrap to wrap elements across multiple tags?如何使用引导程序跨多个标签包装元素？
【发布时间】：2021-12-30 12:35:31
【问题描述】：

已解决：

这个问题实际上是两个单独问题的组合：

当每个句子和每个单词都用标签包裹时，如何生成“类似文章”的段落。这应该自然地与 Bootstrap 的网格和容器系统一起工作，只有当单词周围的跨度彼此间隔（使用空格或换行符）时。换句话说，根据：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span#，标签“是用于分词内容的通用内联容器，它本身并不代表任何东西”，并且两个直接相邻的 s 被视为单个单词的两个不同部分，即 do 被解析用“doing”代替“do”和“ing”。
我的项目代码中的标签是使用 VUE3 的 v-for 生成的，默认情况下不提供两个 s 之间的任何字间距。所以根据Vuejs v-for on inline elements trims whitespace，我通过合作和v-for在两个单词之间添加了一些额外的空格。特别是我在每个单词后添加了一个 {{ ' ' }} 间距。这在语义上分离了单词并进行了换行。

原问题：

我目前正在通过实施个人项目来学习 Bootstrap。在那里我需要显示一个段落，其中每个句子都属于一个标签。同样对于每个句子，每个单独的标记都属于它自己的标签。即类似：

<span>
<span> the </span> <span> first </span> <span>sentence</span> <span>.</span>
</span>
<span>
<span> the </span> <span> second </span> <span>sentence</span> <span>!</span>
</span>

现在我想将这篇文章显示为“真实”文章，其中每个句子都在其前身之后内联显示，即：

第一句话。

第二句话！

请注意，第二句在第一句的句号之后开始，并且由于缺少空格而被换行。

现在我学会了将class='d-flex flex-sm-wrap' 设置为每个句子，以将每个单独的句子分解为：

这是第一个

句子。

这里是

第二句话！

每个单独的句子都会中断，但它们不会内联显示。

您能否提供一个解决方案来满足要求？

还有一种优雅的断词方式吗？每个单词的class='pe-1' 是最佳解决方案吗？

在 2021 年 12 月 30 日编辑，附上 Chris G 建议的最小可运行 HTML sn-p：

在 30.12.2021 再次编辑，注意两个相邻单词之间没有空格也没有返回。它在嵌入式控制台中完美运行，但不能独立运行：https://jsfiddle.net/hv8c6wpf/10/

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">

<div class='container'>
  <div class='row'>
    <div class='col-sm-3'>
      <span class="sentence d-flex flex-sm-wrap pe-1">
              <span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span>
      </span>
      <span class="sentence d-flex flex-sm-wrap pe-1">
              <span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span>
      </span>
    </div>
  </div>
</div>

【问题讨论】：

请发布您正在使用的实际 HTML，最好是 minimal reproducible example。此外，根据您的要求，将句子包装器制作为 flex 容器并不是您真正想要的。
我认为问题出在 HTML 代码中。为什么不将所有内容包装在一个 P 标签中，并在 spans 中设置您需要的样式？
@AhmedElbessfy 确实会节省很多精力。但我想要的是 1. 编辑每个单词的属性（例如，根据它们的 POS 用不同的颜色标记）和 2. 每个句子都应该是可操作的（例如，通过悬停加粗）。
@ChrisG 问题已更新，感谢指出。
再次：为什么要使用 flex 样式故意删除您想要的布局？ jsfiddle.net/zs1t5evm

标签： javascript css twitter-bootstrap frontend bootstrap-5

【解决方案1】：

我认为您不需要额外的 flex 或其他任何东西，只需用 span 包裹每个句子，用 span 包裹每个单词就可以了。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>

  <body>
    <div class="row">
      <div class="col-sm-3">
        <span>
          <span>This</span>
          <span>is</span>
          <span>the</span>
          <span>first</span>
          <span>sentence.</span>
        </span>
        <span>
          <span>This</span>
          <span>is</span>
          <span>the</span>
          <span>second</span>
          <span>sentence.</span>
        </span>
        <span>
          <span>This</span>
          <span>is</span>
          <span>the</span>
          <span>third</span>
          <span>sentence.</span>
        </span>
        <span>
          <span>This</span>
          <span>is</span>
          <span>the</span>
          <span>fourth</span>
          <span>sentence.</span>
        </span>
        <span>
          <span>This</span>
          <span>is</span>
          <span>the</span>
          <span>fifth</span>
          <span>sentence.</span>
        </span>
        <span>
          <span>This</span>
          <span>is</span>
          <span>the</span>
          <span>sixth</span>
          <span>sentence.</span>
        </span>
      </div>
    </div>
  </body>

</html>

每个句子都在col-sm-3 的宽度被换行之后换行。这是你想要的吗？

【讨论】：

确实，我意识到问题在于我的代码 sn-p 具有误导性，与实际情况不符。正在努力更新。

【解决方案2】：

您是否尝试过 d-inline 类？如果我正确理解了您，那么您正在尝试通过引导程序实现自动换行。无论如何，您绝对应该尝试通过 Chrome 开发工具添加类，因为它列出了所有相关的引导类，同时还显示了它们如何更改页面。

使用 px-1 或 mx-1 ：用于在句子中分隔单词。

【讨论】：

嗨，维杰，感谢您的回答。我试图将 d-inline 附加到行、col-sm-3 甚至容器
，不幸的是，它们都不起作用...