Webkit上的文本溢位隱藏文本并且不允許水平滾動-有解無憂

我想將長文本包裝在一行中，隱藏溢位并允許通過水平滾動閱讀整個文本。

我的代碼如下。

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

我目前在 Firefox 瀏覽器中作業的一個例子顯示在 Webkit 上的文本溢位隱藏文本并且不允許水平滾動

如果您在 webkit 瀏覽器（例如 Safari/Edge/Chrome）上測驗它，它不會水平滾動：

是否有可能在 webkit 瀏覽器上也獲得與 Firefox 相同的行為？

uj5u.com熱心網友回復：

首先，我很抱歉留下一個簡單的答案。這個答案的目的是幫助像我這樣正在尋找同樣問題并看到這個問題的人。
我搜索了這個問題，并沒有找到一個原則性的解決方案。但是，如果您想以簡單的方式解決它，您可以將“ 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*

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/417617.html

標籤：

上一篇：Firefox無法從...安裝搜索引擎

下一篇：Django洗掉一個物件