项目场景:
1,超出省略;
2,超出1.5(或指定行)增加省略号替换文本;
功能分析:
1,获取文本长度;
2,获取视口宽度;
3,计算宽度比例,行显示字数;
4,超出渲染替换文本;
功能实现:
Vue获取文本宽度
转载自#蓝色的落叶
//获取计算后的font-size
getComputedStyle(className[0],undefined).getPropertyValue('font-size');
<script type="text/javascript">
var dom = document.getElementsByClassName("love");
GetLine(1.5,dom);
function jsLine(line,className){
var textLength=className[0]['childNodes'][0].length;//文本长度
var fontSize=getComputedStyle(className[0],undefined).getPropertyValue("font-size").substr(0,2);//获取字体大小
var lineNum=Math.round(className[0].clientWidth/fontSize);//四舍五入,一行有多少字
if(textLength>(lineNum*line)){
var newText=className[0].innerText.substr(0,(Math.round(lineNum*line)))+'...';
className[0].innerText=newText;
}
}
</script>
内容总结:
1,获取已知参数;
2,检索可用信息;
3,对比兼容数据,考虑存在逻辑方案;
4,输出结果集;