Javascript 从截断的消息中获取div内的可见文本

我试图获取被截断的div中的可见文本。 例如： 我有一条很长的消息，在某个时候被截断了： “测试消息测试消息…”

我正在寻找一种只检索可见文本而不是整个消息的方法

$.fn.doOverflow=函数（）{
返回此[0]。scrollWidth>this.innerWidth（）
}
$.fn.renderedText=函数（）{
var o=s=this.text（）；
控制台日志；
控制台。对数（s.长度）；
while（s.length&&this.doOverflow（））{
s=s.slice（0，-1）；
//控制台日志；
本条文本（s+“…”）；
//console.log（this.text（））；
}
返回s；
}
console.log（$（'#mySpan'）.renderText（））

#mySpan{
显示：块；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
宽度：150像素
}

JS-Bin
这是span标记的内容。如果长度超过50px，则应使用省略号截断。


打开控制台

如果您可以将文本设置为属性，那么我们可以在不使用javascript的情况下显示工具提示

*{
框大小：边框框；
}
身体{
字体系列：arial；
}
#迈斯潘{
显示：块；
填充：10px；
边框：1px实心#eee；
保证金：10vh 5vh；
边界半径：3px；
位置：相对位置；
}
#迈斯潘：以前{
内容：attr（数据内容）；
显示：块；
空白：nowrap；
文本溢出：省略号；
溢出：隐藏；
}
#mySpan:hover:：after{
位置：绝对位置；
背景：#333；
空白：正常；
颜色：#fff；
顶部：计算（100%+10px）；
左：0；
填充：10px；
字体大小：.85em；
内容：attr（数据内容）；
显示：块；
边界半径：5px；
盒影：2p2px6px3pRGBA（0,0,0,15）；
}

JS-Bin

您还可以将title属性添加到span，该属性将创建工具提示以显示信息。每当用户将鼠标悬停在span上而不是省略号时，您可以使用shavejs。。然后你可以单独处理被截断的文本…我正在寻找一个纯css解决方案。我知道上面的解决方案是有效的，这就是我在代码片段中分享的。我正在寻找使用纯CSS的类似功能？将内容加载到自定义属性中，并在悬停时以伪元素显示完整内容。请参阅代码片段。