在没有滚动条的情况下，如何在具有“文本溢出：省略号”的文本上实现水平滚动拖动功能？

Question

I have several lines of text, each of them is wrapped inside fixed-width paragraph tag. They are different in length. So I truncate the lines with "text-overflow: ellipsis" and hide the scroll-bar with "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;
}

I would like to be able to scroll on drag to see what the full line is, but without displaying the scroll-bar.

Here's a jsfiddle with default scroll-bar, which allows me to do scrolling, and here's a jsfiddle with "overflow: hidden" property, that truncates the lines the way I need, but without scrolling.

So, what are possible ways to hide the scroll-bar but keep scroll-on-drag functionality? Can it be done with pure HTML and CSS or I would have to write JS or even jQuery?

Answer 1

Hi I write a simple method for you, You can develope it

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/