Wuxh

Front-end Development

0%

元素固定宽度文本不换行并且全部展示

前几天遇到一个需求, 用户名过长的时, 不允许换行使其文本全部显示在一行框内;

实现效果

具体项目中实现效果图

解决方法

创建 resetFontSize 方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const resetFontSize = function (el, minFontSize, maxFontSize) {
// 可见区域宽度
var maxWidth = document.documentElement.clientWidth;
// 初始化默认大小
$(el).css({
'font-size': 12,
width: 'max-content'
});
for (let i = minFontSize; i < maxFontSize; i++) {
// 如果内容可以显示, 则字体大小取上上个;
if ($(el).width() > maxWidth) {
$(el).css('font-size', i - 2);
break;
} else {
$(el).css('font-size', i);
}
}
$(el).css('width', '100%');
};

如何使用

因为公司项目使用的 Vue + Jquery, 我在这里用监听用户名改变的时候触发方法 Vue.watch

1
2
3
4
5
6
7
8
9
10
11
12
watch: {
userName: {
handler(val, old) {
console.log('userName change');
this.$nextTick(()=> {
var el = $('.loginDivContent-username');
resetFontSize(el, 10, 300)
});
},
immediate: true
}
}