How to format HTML text so it wraps around keywords

ChrisCosta
April 5, 2024
189 views
2 votes
3 Answers

So I have this code with a paragraph with keywords and text.

I need to make the format so that the keywords appear next to other, the text starts where the keywords end and then the text also wraps around the keywords.

I tried doing it with display: flex but I just couldn’t figure out the way to get the desired outcome. Also the text on the line after the first one should have a small margin to the left, aka to not be in line with the start of the keywords.

I am here putting my code, an also a screenshot of how the desired outcome should be.

Any help is appreciated. Thank you.

.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>

The correct format should look like this:

Answers

.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>

Keywords are displayed as inline-block elements to allow them to appear next to each other.
Text is displayed as inline elements to wrap around the keywords.
Margins are added to adjust the spacing between the keywords and text.

Wrapping text around an element pretty much requires the use of float.

For this reason the "paragraph" wrapper cannot be display: flex as this negates the use of float. Here I have used inline-block instead.

.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;
  margin-left: 1em;
}

<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>

Remove display: flex it isn’t doing what you want it to do.

With display: inline you can get all elements to render inline one after the other.

Using a combination of positive and negative left margins you can emulate the hanging indent on the paragraph too.

.paragraph {
  width: 320px;
  margin-left: 2em; // indent the whole paragraph
}

.keywords {
  display: inline;
  margin-left: -2em; // Push these back over to the left
}

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

.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;
  display: inline;
}

<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>

Please signup or login to give your own answer.

Click here to cancel reply.