字体按宽度自适应大小

阿超

发布于 2023-09-14 08:15:16

1100

发布于 2023-09-14 08:15:16

不用给我爱，不用给我钱，不用给我声誉，给我真理吧。——梭罗的《瓦尔登湖》

一般可以使用vw或者em一类的属性来适配，但如果还需要更小，就只能使用scale缩放了，例如使用js

function scaleMemberName(memberElement: Element | null, reset: boolean) {
  if (!memberElement) {
    return;
  }
  const nameElement = memberElement.querySelector('.name');
  if (!(nameElement instanceof HTMLDivElement)) {
    return;
  }
  if (reset) {
    nameElement.style.scale = String();
    return;
  }
  const boundingBox = nameElement.getBoundingClientRect();
  const actualWidth = boundingBox.width;
  const scale = 84 / actualWidth;
  console.log({ [`${nameElement.textContent}`]: actualWidth, scale });
  if (scale >= 1) {
    return;
  }
  nameElement.style.scale = String(scale);
}
onMounted(() => {
  document
    .querySelectorAll('.member')
    ?.forEach((d) => scaleMemberName(d, false));
});

效果如下：