How can I prevent horizontal overflow? - html

Question

Say I have a <span> that contains a very long sequence of numbers - long enough that it flows right off the right hand side of the page.
Most browsers would give me a scrollbar such that I can then scroll left and right.
How can I prevent the ability to horizontally scroll?
I've tried body { overflow-x: hidden; }, which works for desktop Chrome, but Chrome for Android retains the ability to horizontally scroll.
How can I absolutely guarantee no scrolling?
(I can adjust both HTML and CSS in this scenario, but I cannot use JS.)

Answer 1

Do you mind breaking the string of numbers? If not, you can try word-break:break-all. Here's the same HTML with and without word-break.
#break {
width: 300px;
word-break: break-all;
padding: 3px;
}
#noBreak {
width: 300px;
padding: 3px;
}
<div id="break">
<span>123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789
</span>
</div>
<div id="noBreak">
<span>123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789
</span>
</div>

Answer 2

I think applying overflow-x :hidden works.
But unless you share the part of your code its difficult to answer to your requirement.
The better approach i would suggest is to use the container class of bootstrap 4, which makes the div responsive and you can keep this span inside that, or keep it in the div.
<div class="wrapper container">
<div class="row">
...
</div>
</div>
The row class will always give -15px margins.
and container class gives padding of +15px.
Your question can get a clearer response if you can share the code snippet.