Webkit 上的文本溢出隐藏文本并且不允许水平滚动

Question

我想将长文本换成一行，隐藏溢出并允许通过水平滚动阅读整个文本。

我的代码如下。

• 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;
}

this JSFiddle中显示了我目前在 Firefox 浏览器中工作的示例

如果你在 Firefox 中测试它，你会看到它正确地水平滚动：

如果您在 webkit 浏览器（例如 Safari/Edge/Chrome）上测试它，它不会水平滚动：

是否有可能在 webkit 浏览器上也获得与 Firefox 相同的行为？

Answer 1

首先，我很抱歉留下一个简单的答案。这个答案的目的是帮助像我这样正在寻找同样问题并看到这个问题的人。
我搜索了这个问题，并没有找到一个原则性的解决方案。但是如果你想用简单的方式解决它，你可以将“overflow-text”设置为clip，并且在行尾没有点（...）。

* {
    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>

但是，您也可以使用这些解决方案来获得更好的代码。
https://codepen.io/stantonl33/pen/QzMLye
和
https://stackoverflow.com/a/27507784/10749726*javascript solution*