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

HTML-CSS
1

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:

image
image1652×434 53.6 KB

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

2

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
3

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
5

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

6

Yes it works, thanks a lot!