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

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

实现效果

具体项目中实现效果图

解决方法

创建 resetFontSize 方法

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

watch: {
  userName: {
    handler(val, old) {
      console.log('userName change');
      this.$nextTick(()=> {
          var el = $('.loginDivContent-username');
          resetFontSize(el, 10, 300)
      });
    },
    immediate: true
  }
}