我需要"..."在可调整大小的元素内的文本中间实现省略号()。这是可能的样子。所以,
"..."
"Lorem ipsum dolor sit amet. Ut ornare dignissim ligula sed commodo."
变成
"Lorem ipsum dolor sit amet ... commodo."
当元素延伸到文本的宽度时,我希望省略号消失。如何才能做到这一点?
在HTML中,将完整值放在自定义data- *属性中,例如
<span data-original="your string here"></span>
然后分配load和resize事件侦听器的JavaScript函数,将读取原始数据属性,并将其放置在innerHTML您的跨度标签。这是省略号功能的示例:
load
resize
innerHTML
function start_and_end(str) { if (str.length > 35) { return str.substr(0, 20) + '...' + str.substr(str.length-10, str.length); } return str; }
调整值,或者如有必要,对不同的对象将其设为动态。如果您有来自不同浏览器的用户,则可以从dom中其他位置使用相同的字体和大小从文本中窃取参考宽度。然后插入适当数量的字符以供使用。
提示还应在…上带有缩写标签,或提示谁使用户能够获得带有完整字符串的工具提示。
<abbr title="simple tool tip">something</abbr>