如何设置 HTML 文本格式以使其环绕关键字

Question

所以我有这段代码，其中有一个带有关键字和文本的段落。

我需要制定格式，以便关键字出现在其他关键字旁边，文本从关键字结束的地方开始，然后文本也环绕关键字。

我尝试用

display: flex

来做，但我就是不知道如何获得想要的结果。此外，第一个文本之后的行上的文本应该在左侧有一个小边距，也就是不与关键字的开头对齐。

我在这里放置我的代码，还有一个屏幕截图，说明所需的结果应该如何。

如有任何帮助，我们将不胜感激。谢谢你。

.paragraph {
  display: flex;
  width: 320px;
}

.keywords {
  display: flex;
}

.keywords .item {
  font-family: "Times New Roman", Times, serif;
  color: #000;
  font-style: italic;
  white-space: nowrap;
}

.keywords .item::after {
  content: "-";
  margin-left: 5px;
  margin-right: 5px;
  font-family: "Times New Roman", Times, serif;
  font-weight: 500;
}

.text {
  font-family: "Times New Roman", Times, serif;
  color: #000;
  font-style: italic;
  font-weight: 300;
}

<div class="paragraph">
  <div class="keywords">
    <div class="item">KEYWORD 1</div>
    <div class="item">KEYWORD 2</div>
  </div>
  <div class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>

正确的格式应如下所示：

Answer 1

在元素周围包裹文本几乎需要使用

float

。

因此，“段落”包装不能是

display: flex

，因为这会否定

float

的使用。这里我用

inline-block

代替。

.paragraph {
  display: inline-block;
  width: 320px;
}

.keywords {
  display: flex;
  float: left;
}

.keywords .item {
  font-family: "Times New Roman", Times, serif;
  color: #000;
  font-style: italic;
  white-space: nowrap;
}

.keywords .item::after {
  content: "-";
  margin-left: 5px;
  margin-right: 5px;
  font-family: "Times New Roman", Times, serif;
  font-weight: 500;
}

.text {
  font-family: "Times New Roman", Times, serif;
  color: #000;
  font-style: italic;
  font-weight: 300;
}

<div class="paragraph">
  <div class="keywords">
    <div class="item">KEYWORD 1</div>
    <div class="item">KEYWORD 2</div>
  </div>
  <div class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>

Answer 2

.paragraph {
  width: 320px;
  font-family: "Times New Roman", Times, serif;
}

.keywords .item {
  display: inline-block;
  font-style: italic;
  color: #000;
  margin-right: 5px; /* Adjust margin as needed */
}

.text {
  display: inline;
  font-style: italic;
  font-weight: 300;
  color: #000;
  margin-left: 10px; /* Adjust margin as needed */
}
<div class="paragraph">
  <div class="keywords">
    <div class="item">KEYWORD 1</div>
    <div class="item">KEYWORD 2</div>
  </div>
  <div class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</div>

关键字显示为内联块元素，以允许它们彼此相邻出现。 文本显示为内联元素以环绕关键字。 添加边距以调整关键字和文本之间的间距。