How do I prevent elements from going to the next line?

How do I prevent these blue “bubbles” (links) from cutting off at the end of the line?

CodePen link: https://codepen.io/houvenaghel-helena/pen/RwrzPjK

Image:

(I know the links are ugly, but this is a prototype)

As I understand you would like your links to always stay together. If it is so you can try this:

a{
  display:inline;
  white-space: nowrap;
  text-decoration: none;
  color: white;
  background-color: #005c74;
  border-radius: 25px;
  margin: 1%;
  padding: 0.2%;
}
1 Like

You should be able to give the links a class and use white-space: nowrap on them.

(This may need more work. I’m not a CSS guru.)

2 Likes

Tweaking @vasylk’s excellent advice, I might do:

a{
  text-decoration: none;
  white-space: nowrap;
  color: white;
  background-color: #005c74;
  border-radius: 25px;
  margin: 0 0.1% 0 0.1%;
  padding: 0 0.5% 0 0.5%;
}

Also, I suggest adding line-height: 35px to your body selector, so that the blue bubbles do not touch each other when they line up vertically with each other.

2 Likes

Sometimes it’s helpful to me to view it in full page view. To enable full page view you need to verify your email.

You don’t need the suggested nowrap. The browsers are still overriding your preference. They are programmed to wrap to the next line on space or hyphen. Lucky for you your words are separated by a space. Your solution is to use the non-breaking space character.  

Your pen was acting up for me. You probably copied and pasted your code into codepen. Deleting the big spaces near the red error marks will get rid of the invisible characters codepen complains about. FYI

Yes it works, thanks a lot!