Question 402736 in Html Question posted in
Some basic documentation can be found here.

Html – 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/[email protected]/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%

Tags:

2

Answers


  1. 0

    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/[email protected]/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>
    Login or Signup to reply.
  2. 0

    You can wrap a div around your content and set display: inline.

    .container {
    width: 50px;
    display: inline;
    overflow-x: auto;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search