制作需求中,尤其是H5的制作,很多标题难免有输入很长,又要一行展示完成。就要用到隐藏超长文本的功能。尾部隐藏展示...是大家最常用到的功能样式。overflow: hidden; 超长隐藏 white-space: nowrap; 不换行,全部展示 text-overflow: ellipsis; 超长显示...
你以为这样就结束了? 那就错了, 在业务的使用过程中,可能首部都是一样的,而重要的信息在尾部,这时我们可能就要隐藏首部,或者对中间进行隐藏。 这时就不能使用以上的样式了,固在下面写了一个操作字符串的功能。
废话不多说先上代码
/**
* @method textEllipsis() 隐藏超长字符
* @param val 文字内容
* @param offsetWidth 文字框宽度
* @param type left: 左侧隐藏 center:中间隐藏 right尾部隐藏 默认尾部
*/
export function textEllipsis (val, offsetWidth, type, size) {
let data = val
// 生成一个span标签 要用span 用div的话, 宽度计算有问题会很宽
const spanElement = document.createElement('span')
spanElement.innerHTML = val // 给span赋值
spanElement.style.font = (size && `${size}px`) || '14px';
// 生成一个已字符串为内容的span标签用于计算字符串原本所占用的宽度
document.body.appendChild(spanElement);
let ellipsis = getEllipsis(size) // 获取... + 一个中文字符的宽度, 防止计算的宽度不够
// 做一个小的性能优化,如果不满足的话直接return
if (spanElement.offsetWidth + ellipsis < offsetWidth) return val
// 用于隐藏中间或者尾部的字符串
let start = type == 'center' ? Math.floor(val.length / 2) : val.length
let end = type == 'center' ? start + 1 : 0 // 用于隐藏中间或者首部的字符串
let rank = true // center的时候 为true去除前面的字符, false去除后面的字符
while (spanElement.offsetWidth + ellipsis > offsetWidth) {
data = data.split('...').join('') // 去除...
if (type == 'left') {
data ='...' + data.slice(1)
} else if (type == 'center') {
rank ? start -- : end ++
rank = !rank
// 循环去除 左面去除一个, 右面去除一个
data = data.slice(0, start) + '...' + data.slice(end);
} else {
start--
data = data.slice(0, start) + '...'
}
spanElement.innerHTML = data // 给span赋值
}
document.body.removeChild(spanElement);
return data
}
const getEllipsis = ((size) => {
const spanElement = document.createElement('span')
spanElement.innerHTML = '...' // 给span赋值
spanElement.style.font = (size && `${size}px`) || '14px';
document.body.appendChild(spanElement);
let width = spanElement.offsetWidth
document.body.removeChild(spanElement);
return width + (size || 13) // 加一个文字的宽度
})
以上核心思路(这里使用export, 方法放在了公共JS当中。)
1.首先先拿到页面中容器的宽度,在拿到要展示的文字内容(记住这里是真的操作了字符串,后续逻辑处理和页面展示不要使用一个变量容纳)
2.先生成一个span标签,然后把要展示的字符串进行赋值,这里要进行文字大小的设定。然后计算出当前字符串要占用的空间(这里要加上...和一个中文的宽度,才会导致计算出来的数据正确无误。调用的方法是getEllipsis)
3.计算完成后与当前容器的宽度做比较,如果超出,那说明要对超长的部分进行隐藏。
4.start 当隐藏center的时候,要取中间的部分。其他用到的时候right,就要取字符串的长度,一点点的减少。
5.end 当隐藏center的时候的时候,取start+1,以供start去除一位,end去除一位形成中部隐藏的效果。
6.使用while循环, 知道逻辑处理符合字符串暂用长度比容器的宽度窄的时候,就可以return出当前的字符串了。
以上就是该功能的描述,不清除的也可以在评论区说,我会进行回复。还是很好玩的小功能。