How do you disable right scrolling when text goes off the screen?

[simona6]

We want to push some very large, like 11em font text off the screen.

It's fine off to the left, no scroll. But when it goes off the right, ona. mobile, the entire browser will shift across, to reveal the rest of the text.

How do you stop that?

overflow-x: hidden; doesn't do it.

Simon

[requinix]

Can you demo this somewhere like jsfiddle, if it's not already visible somewhere? You should be able to resize your browser to mobile proportions to trigger the effect, or if you're using... dated design practices, enable its "emulation mode" or whatever to simulate a mobile browser.

The scrollbar will be not just because of content but because of bounding boxes: if you have content way off to the side, overflow-x can hide the content, but that won't matter if the element isn't bound by its width such that it actually has overflowing content.

[simona6]

https://jsfiddle.net/simonml/jub438L5/1/

This is kind of it.  But what happens is that if I apply the overflow to the body tag, it affects other things like images that are in containers wtih curved clip bottoms.  The image then moves down.  So it has to be assigned to the container of the item in question, but when I apply the code, and use the 'Geomanist' font, it seems to clip the text.

This happens when I apply it to the Div itself.

[simona6]

It does the same thing if I set the font to Avenir as well.

[requinix]

If I modify the example to push "Design" off the right edge, I get the horizontal scrollbar. If I set overflow-x:hidden on the body, the scrollbar goes away. So that's working as expected.

Can you add more to the example? Like these images (or placeholders of) and containers you're working with?

[simona6]

Am I allowed to post the actual website where this is happening on here, so you can see it in total context?
I didn't want to post, if it is seen as advertising.

[simona6]

I've also had an issue with max-width: 100vw.
Since the text is Absolute Positioned, and off the screen to the left, if on a phone I then increase the font size so it goes off the left, and off the right, the vw width at 100, actually causes a line, or it to stop before the edge of the screen.  So there is no one size fits all.
Is it that you can't set the overflow-x hidden and 100vw to the element that is going off the screen, or do you have to contain that in an outer DIV?

I just don't see a full proof way to do it, but have see website that DO do it.  Again, won't post as unsure if it is deemed as advertising.

[requinix]

48 minutes ago, simona6 said:

Am I allowed to post the actual website where this is happening on here, so you can see it in total context?

Nah, it's fine. As long as it's okay with you, "here is my site, please help me understand why it's not working" is totally a reasonable thing to do.

5 minutes ago, simona6 said:

Since the text is Absolute Positioned

Absolute positioning? Oh, that could be a problem. Really should avoid that whenever possible.

[simona6]

Mmmm I am happy to show a link.  But I take it, with the Abs Pos, it makes life doubly difficult then?

Right now we are doing it so the text goes off the left (no sliding going on), and on mobile, we either hide it, or just make it smaller so it doesn't quite reach the right side.

Is it safe to assume with Abs Pos, you can't for example, make it BIG text, with -left Pos, and big enough to force the text OFF the page... but still preventing scrolling?  Please confirm before I do share the link.

[requinix]

Absolute positioning is a double-edged sword. It does make sense in a number of situations, and is even the "correct answer", but there are a number of other situations where it isn't a good idea and the design should be done through choices in layout instead.

I'm not really sure what the goal is because making text go off the side of the screen seems weird, but I'll throw out something: have you considered using screen-relative measurement units (like vw/vh) with things besides the width? Like, you can apply it to font-size (but be careful about that), or margin-left.

[simona6]

Yes tried this.

https://nextbase.co.uk/dash-cams/322gw-dash-camå

Look at this site.  Not ours or an ad, but where I saw the idea.  Bring the width in and you see the big text goes off the page.  But there is nothing nudging a space to the right when it does it.

How?!  I don't think this uses Abs Pos tho.  Sounds like that has good and bad points when it comes to this.  Just assumed if you are positioning it like that, you can stop the horiz movement dead in it's tracks.  From the sound of it, in this situ, not.

[requinix]

What part of the page are you talking about? The "322GW" at the top?

Yes, it isn't absolute positioning. It's simply a <body> with overflow-x and a descendant element (a heading inside a div inside a div inside a div...) whose text content is overflowing out the side.

The positioning is done (using grid) by splitting the "row" in half, with the image on the left and the text on the right. The text's font size was chosen such that it's able to fit the text on the screen normally (the text is known to be a short string like "322GW" or "222"), and there appears to be a little bit of responsive design involved, but collapsing the page enough will eventually cause it to overflow.

[simona6]

Ah I see.  So it's just big text andon a bigger screen it goes outside the main body container, on a small window, it's allowed to go outside it, with the overflow disabled.

Gotcha.  Ta.  Not poss with Abs Pos.

[requinix]

It's possible to do, but actually this is more like a demonstration of my point that you don't need it to make that work.

But that's just a detail. The scrollbar thing is as described: go ahead and make the text go off the screen, then set overflow-x on a parent element to hide it. If that's not working then please go ahead and just post that link.