跨越标签而不将文本分成两行

学生

如何确保跨度不能放入行中，它会转到下一行，而不是将其一半放在当前行中，其余部分放在下一行中？

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

现在是什么：

我想要的样子

我查看了 div 的 no-wrap 样式，但是列宽会受到此影响，因此这不起作用。

请不要说只使用“br”标签哈哈哈，它需要对不同的设备做出响应。

普隆詹

你可以试试 wbr 和 nbsp

并关闭您的报价并具有唯一的 ID 或使用一个类

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。