在项目中，经常会遇到文本超出问题，通常的解决办法是超出显示省略号，要么手动截取文本，要么设置css样式。在此我封装了一个组件可以自动使多行文本超出部分显示为省略号，本文主要记录了思路，如果嫌我废话太多可直接下拉至最后代码（简书竟然不能设置锚点真是...）。
常用到的单行文本超出解决办法：
{
overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;
}
我本以为text-overflow也可以设置多行文本，于是最开始的思路就是用元素的line-height 乘以设置的行数rows，得到高度，然后手动设置元素高度，超出部分自动显示省略号岂不是美滋滋，就可以拿去跟同事装逼了，UI妹子可能就会多看我一眼了。没想到刚一出马就遇到了问题，element.style的方式是取不到css设置的样式的。要使用如下方法（我没做IE兼容）
/*
element:你的元素，
attribute:css样式名,驼峰形式
*/
/*非IE浏览器*/
window.getComputedStyle(element)[attribute]
/*IE浏览器 */
element.currentStyle[attribute]
但是我太高估了text-overflow，这种思路可以实现文字截取，但是不会自动出现省略号。
于是我决定集百家之众长，不能闭(dan)门(wu)造(zhuang)车(bi)，就去百度了一下，发现webkit内核的浏览器可以直接用css样式设置多行文本超出部门自动显示省略号，如下所示
/*webkit-line-clamp设置行数即可*/
{
display:-webkit-box;
webkit-line-clamp: 2;
webkit-box-orient: vertical;
}
我不禁痛心疾首，感觉自己全做了无用功，再也得不到UI妹子的爱了 ，但是转念一想，那非webkit内核的浏览器怎么办，于是决定写一个兼容的方法。
最开始的思路是，根据字体大小和元素宽度，取到单行字数，即设定行数时可以得到元素能容纳的字数，这样做文本截取即可，试验后发现不同字符的占宽明显不同，比如单个汉字就明显比单个字母或者数字占宽要大，思路流产。
后来转念一想，既然我可以拿到实时高度，我何不每次删一个字符就算一遍高度。我可以拿到设定行数和行高，所以可以拿到最终呈现的元素的高度，这样每次拿实时的高度与此高度进行比较，若实时高度不大于最终高度，即可实现文字截取，此时我在尾部添加一个省略号岂不美哉。试验了一下发现可行，即为最终方案，代码如下
html部分
<div
class="jc-textBox"
rows="1"
style="width:100px"
>
111111111111111111111111111111111111111
</div>
<div
class="jc-textBox"
rows="3"
style="width:100px"
>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
</div>
<div
class="jc-textBox"
rows="3"
style="width:100px"
>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
css部分
.jc-textBox {
word-wrap: break-word;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1;
}
js部分
let textBoxs = $('.jc-textBox'),
tbLength = textBoxs.length;
//获取元素的当前样式
const getCurrentStyle = (element,attribute) => {
return window.getComputedStyle(element)[attribute];
}
//获取当前行数设置下的最大高度
const getMaxHeight = (element,rows) => {
let lineHeight = getCurrentStyle(element,'lineHeight');
let number = 0;
if(lineHeight === 'normal'){
let fontSize = getCurrentStyle(element,'fontSize');
number = getNumber(fontSize) * 1.2;
}else {
number = getNumber(lineHeight);
}
return number * rows;
}
//当元素的现有高度大于最大高度时，就删除字符，直到现有高度不大于最大高度
const removeLastChar = (element,maxHeight) => {
let end = false;
let text = element.innerText;
let textArr = text.split('');
while(!end){
textArr.pop();
let newText = textArr.join('');
element.innerText = newText + '...';
let currentHeight =getCurrentStyle(element,'height');
currentHeight = getNumber(currentHeight);
if(currentHeight <= maxHeight){
end = true;
}
}
}
//获取属性中的数字
const getNumber = (str) => {
let number = parseFloat(str);
number = Math.ceil(number);
return number;
}
for(let i = 0;i<tbLength;i++){
let textBox = textBoxs[i];
let options = {
rows: parseInt(textBox.getAttribute('rows')),
isSupportLineClamp: typeof(textBox.style.webkitLineClamp) != 'undefined',
}
textBox.title = textBox.innerText;
let rows = options.rows;
let maxHeight = getMaxHeight(textBox,rows);
if(options.isSupportLineClamp){
textBox.style.webkitLineClamp = rows;
textBox.style.display = '-webkit-box';
textBox.style.webkitBoxOrient = 'vertical';
}else {
let height = getCurrentStyle(textBox,'height');
height = getNumber(height);
if(height > maxHeight){
removeLastChar(textBox,maxHeight);
}
}
}
测试效果
chrome
chrome-textbox.png
firefox
firefox-textbox.png
注：firefox默认样式时中文的行高乘行数不等于元素高度，至今不知道为啥，可以通过显式的设置line-height或者改变font-family来解决，我用了第一种办法。
好了，我要去装逼了。
网友评论