我如何在具有“拖动”的文本上实现水平滚动功能;文本溢出:省略号;没有滚动条

How can I implement horizontal scroll on drag functionality on text that has "text-overflow: ellipsis" without the scrollbar?

本文关键字：文本 功能 滚动 溢出 滚动条 省略号 水平 实现 拖动      更新时间：2023-09-26

我有几行文本，每行都封装在固定宽度的段落标记中。它们的长度不同。因此，我用"text overflow：省略号"截断行，并用"overflow：hidden"隐藏滚动条。

HTML:

<p>This is a short line</p>
<p>This line is a little bit longer</p>
<p>This is a really very long very long very long line</p>
<p>This is a short line</p>
<p>This line is a little bit longer</p>
<p>This is a really very long very long very long line</p>
<p>This is a short line</p>
<p>This line is a little bit longer</p>
<p>This is a really very long very long very long line</p>

CSS：

p {
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

我希望能够拖动滚动来查看整行是什么，但不显示滚动条。

这里有一个带有默认滚动条的jsfiddle，它允许我进行滚动，还有一个带有"overflow：hidden"属性的jsfiidle，它可以按照我需要的方式截断行，但不需要滚动。

那么，有什么可能隐藏滚动条但保持拖动滚动功能的方法呢？它能用纯HTML和CSS完成吗？或者我必须写JS甚至jQuery？

嗨，我为你写了一个简单的方法，你可以开发它

var clicked = 0;
var regular = 0;
$(document).ready(function(){
    $("p").mousedown(function(){
        clicked = 1;
        regular = 0;
    });
    $("p").mouseup(function(){
        clicked = 0;
    });
    $("p").mousemove(function(event, a, b){
        var p = $(this);
        if( event.offsetX > (p.width() - 30)  && clicked == 1){
            console.log((regular - 1));
            regular--;
            p.css({"text-indent":(regular) + "px"});
        }
        if( event.offsetX < 30 && event.offsetX > 0   && clicked == 1){
            console.log((regular - 1));
            regular++;
            p.css({"text-indent":(regular) + "px"});
        }
    });
});

JSFiddle：http://jsfiddle.net/k4mhohc8/4/

相关文章：