Text overflow on Webkit hides text and not allow horizontal scrolling-CodePudding

I want to wrap long text in one line, hiding overflow and allowing to read the entire text doing an horizontal scroll.

My code is the following.

HTML

<div>
  <p ><a>This text is very very  very  very  very  very  very  very  very  very  very  very  very  very  very  very  very  very  very  very long and need to be hidden in small screen</a></p>
</div>

CSS:

.horizontal_scroll::-webkit-scrollbar {
    display: none;
}

.horizontal_scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
    text-overflow: ellipsis;
    overflow: auto;
}

div p{
    overflow: hidden;
    white-space: nowrap;
    padding: 3px;
}

* {
    margin: 0;
    padding: 0;
}

body {
    font-size: 16px;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

An example of my currently working implementation in Firefox browser is show in

Insted if you test it on webkit browser (es. Safari/Edge/Chrome) it does not horizontally scroll:

Is it possible to obtain the same behaviour of Firefox also on webkit browsers?

CodePudding user response：

First of all, I apologize for leaving a simple answer. The purpose of this answer is to help people like me who are looking for the same problem and see this question.
I searched for this problem and did not find a principled solution to it. But if you want to solve it in a simple way, you can set the "overflow-text" to the clip and not have a dots (...) at the end of the line.

* {
    margin: 0;
    padding: 0;
}

body {
    font-size: 16px;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    
    padding:3rem;
}
.horizontal_scroll::-webkit-scrollbar {
    display: none;
}

.horizontal_scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
    text-overflow: clip;
    overflow: auto;
}

div p{
    overflow: hidden;
    white-space: nowrap;
    padding: 3px;
    background: #eee;
}

<div>
  <p ><a>This text is very very  very  very  very  very  very  very  very  very  very  very  very  very  very  very  very  very  very  very long and need to be hidden in small screen</a></p>
</div>

However, you can also use these solutions to have a better code.
https://codepen.io/stantonl33/pen/QzMLye
and
https://stackoverflow.com/a/27507784/10749726 *javascript solution*