htmlcssvue.js

How to wrap two spans with an icon into one line with CSS

I want to wrap two spans with an icon in one line with CSS but it works only when I make the screen bigger. Is there any solution to have it working all the time?

<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"/>
<i class="fas fa-clock"></i>
<span class="menu-top-hidden display-inline">
  Subscriptions
</span>
<span class="badge bg-danger display-inline">
  2
</span>
<span class="badge bg-warning display-inline">
  3
</span>

For some reason I cannot add the icon in this example. This seems to look okay except that in my application the span with number 3 goes in a new line if the size of the screen is > 67%

Solution

  • A span tag is an inline element and is treated as a character.

    You can use it as below to prevent the line break from occurring even if the screen is small.

    .wrapper {
  white-space: nowrap;
}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">
<i class="fas fa-clock"></i>
<span class="menu-top-hidden display-inline">
      Subscriptions
    </span>
<span class="badge bg-danger display-inline">
      2
    </span>
<span class="badge bg-warning display-inline">
      3
    </span>
</div>