How to prevent moving text down inside div?

Question

.left {
      float: left;
      width: 75%;
      padding: 1px;
      border: 2px solid #eff0f0;
      font-weight: 450;
      font-size: 14px;
      border-right: none;
      text-align: center;  
    }

<div class="left">https://temo.derocitycapul.com/?code=1234567</div>

Here how it looks on the browser:

And here how it looks on the small window browser:

My question is how to prevent sliding the text to another row and make the text inside the div to be in a single line in any browser window size.

If the text won't fit on the screen what should happen? – Paulie_D Feb 04 '21 at 04:03 — Paulie_D, Feb 04 '21 at 04:03
@Paulie_D it should be scrollable – Michael Feb 04 '21 at 04:04 — Michael, Feb 04 '21 at 04:04

score 1 · Answer 1 · answered Feb 04 '21 at 04:04

1

white-space:nowrap should do the trick. Use overflow-x:auto to make it scrollable:

.left {
  float: left;
  width: 75%;
  padding: 1px;
  border: 2px solid #eff0f0;
  font-weight: 450;
  font-size: 14px;
  border-right: none;
  text-align: center;  
  white-space:nowrap;
  overflow-x:auto;
}
div{
  width:100px !important;
}

<p>With white-space:nowrap: </p><div class="left">https://temo.derocitycapul.com/?code=1234567</div><br/>
<p>Without: </p><div class="left" style="white-space:initial">https://temo.derocitycapul.com/?code=1234567</div>

answered Feb 04 '21 at 04:04

Spectric

27,594
6
14
39

Thanks, but it not scrollable – Michael Feb 04 '21 at 04:31
@Michael What do you mean? – Spectric Feb 04 '21 at 13:49

score -1 · Answer 2 · answered Feb 04 '21 at 04:29

You can try this way

.left {
  float: left;
  width: 200px;
  padding: 1px;
  border: 2px solid #eff0f0;
  font-weight: 450;
  font-size: 14px;
  border-right: none;
  text-align: center;  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="left">https://temo.derocitycapul.com/?code=1234567</div>

How to prevent moving text down inside div?

2 Answers2