CODEWITHSUNDEEP
htmlbootstrap-4
Student
Student

Reputation: 89

Span tags together without breaking text into two lines

How to make sure if a span can't fit in the line, it goes to the next line, instead of having half of it in the current line and the remaining part in the next line?

<div class="col>
   <p style="line-height: 3;">
      <span id="tag">College Applications</span> 
      <span id="tag">Internships and Jobs</span> 
      <span id="social-tag">Pro Bono</span> 
      <span id="social-tag">People of Color</span>
   </p>
</div>
<div class="col></div>

What it is right now:

enter image description here

What I want it to be

enter image description here

I looked into no-wrap style for div but then the column width gets affected by this, so this doesn't work.

Please don't say to just use "br" tag hahaha, it needs to be responsive for different devices.

Upvotes: 0

Views: 52

Answers (1)

mplungjan
mplungjan

Reputation: 177860

You can try wbr and nbsp

And close your quotes and have unique IDs or use a class

.col {
  width: 200px;
  background-color: yellow
}

span {
  padding: 5px;
}
<div class="col">
  <p><span class="tag">College&nbsp;Applications</span><wbr/><span class="tag">Internships&nbsp;and&nbsp;Jobs</span><wbr/><span class="social-tag">Pro&nbsp;Bono</span><wbr/><span class="social-tag">People&nbsp;of&nbsp;Color</span></p>
</div>

Upvotes: 1

Related Questions