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 浏览器（es.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
和
*javascript solution*

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

Text overflow on Webkit hides text and not allow horizontal scrolling

css

firefox

webkit

overflow

horizontal-scrolling