Can I have css of a <span> change when <span> can't fit in screen width?

Question

When I decrease the width of my screen is there a way to modify the css of a element so it stays in line rather than drop to the next line?

Answer 1

Yes, it is possible, just use Media queries. Here are the docs: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

But here is a simple exmaple:

div{
  width: 300px;
  background-color: red;
}

@media (min-width: 700px){
    div{
        width: 150px;
        background-color: green;
    }
}

and some more reading https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Answer 2

If you want to force span's to stay inline use display:inline-flex; on the parent tag. Like so:

<div style="display: inline-flex;">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
<span>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span>
</div>

Answer 3

I am going to give it a shot. Suppose you have a HTML structure like this:

<div class="keepInLine">
     <span>This is a span</span>
     <span>This is another span</span>
</div>

And you want your spans to keep in line, you can use "white-space: nowrap;":

.keepInLine{
    white-space: nowrap;
 }

Since the span elements are inline by default, this will keep them in one line. reference: W3CSchools

For a simple example like above, there is no need to use media queries. However, if your HTML structure is different or you want something else, you might need to use media queries.

For example, if you want to change the width of your SPAN elements, so they completely fit on to your screen, you will need media queries:

@media (max-width: 600px) {
  .keepInLine span {
display:inline-block;
    width:300px;
  }
}

Or you can define the width of your spans in percentage:

.keepInLine span{
     width:50%;
  }

This will also keep them side by side.

I could help you better if I would know yout HTML structure though...