允许使用省略号滚动溢出文本 - Cordova应用程序

Question

我正在努力寻找一种解决方案，允许用户滚动我的混合移动应用程序中的文本，但在可见文本的末尾显示省略号。

我已尝试在text-overflow ellipsis when scrolled is not showing overflown content in Chrome and IE中标记为正确的解决方案，但在我的情况下无法解决。

我还尝试在这些事件期间使用touchstart和touchend事件修改text-overflow属性，但这似乎没有效果，滚动时文本仍然被截断，如如下所示。

初始文字

滚动文字

下面是我的HTML，CSS和JQuery

<div class="col-xs-10 text-center">
     <p class="profile-sport">This is sample text to see how long the line extends for.</p>
</div>

.profile-sport, .profile-country {
line-height: 50px;
color: #888787;
overflow: scroll;
text-overflow: ellipsis;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
}

.profile-sport::-webkit-scrollbar { 
display: none;
}

$('.profile-sport').bind('touchstart', function(){
    $('.profile-sport').css('text-overflow', 'ellipsis');
}).bind('touchend', function(){
    $('.profile-sport').css('text-overflow', 'visible');
});

任何帮助将不胜感激。感谢。