CODEWITHSUNDEEP
htmlcss
itinance
itinance

Reputation: 12388

How to avoid line break of HTML-Elements within a parent-span?

I want to put two HTML elements next to each other and avoid that the second element (icon) will start in the next line. They shall always be rendered next to each other by all means.

Code:

   <span class="white-space:nowrap;display:inline-block;overflow: 
   hidden;">
       <span class="ui darkgray label" style="font-family: Courier New, Monospace">0x1fc...cc75</span>
       <a href="https://rinkeby.etherscan.io/address/xxxxxx" 
   target="_blank" style="color: black" title="Lookup on Block-Explorer">
          <i class="eye icon"></i>
       </a>
    </span>

Explanation: the inner and the element shall be rendered next to each other instead of getting rendered line by line.

What happens within smaller browser windows, is this:

enter image description here

What I want to achieve instead:

enter image description here

How to do that?

I read about white-space: nowrap but this is never recognized. I read also about display:inline-block;overflow: hidden but it all doesnt matter. Browsers are not recognizing anything of these styles.

Upvotes: 1

Views: 66

Answers (1)

001
001

Reputation: 2059

white-space is used for text wrap, more about white-space
Use flexbox, more about flexbox.

div {
  display: flex;
  flex-wrap: nowrap;
}

span {
  height: 40px;
  border-radius: 4px;
  color: #ffffff;
}

.one {
  width: 200px;
  background-color: red;
  margin-right: 5px;
}

.two {
  width: 40px;
  background-color: blue;
}
<div>
  <span class="one">1</span>
  <span class="two">2</span>
</div>

Upvotes: 2

Related Questions