Text overflow on Webkit hides text and not allow horizontal scrolling

Question

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 class="custom_line horizontal_scroll"><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 this JSFiddle

If you test it in Firefox you will see that it correctly scroll horizontally:

1. 
2. 

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

1. 
2. 

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

Answer 1

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 class="custom_line horizontal_scroll"><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*