【Angular】根据文本宽度动态设置文本的样式

 

UI提了一个需求，大概内容是，在默认情况下，字体大小22px，宽度最大为104px；但是如果内容太多的话，max-width为114px;字体改成18px。。。（内心：为什么就不能多少就变小？为什么不给个大点的位置放？为什么不能一开始都显示为小号？？？）

emmmm。尽管十分不情愿（这种基于自己菜的不情愿实在是难受），但是由于UI和产品是上帝，只能开始了各种探索之路了。

由于自己的渣渣CSS技术，找不到CSS的解决方案，只能用上js方法了。

尝试过的朋友可能都知道，如果直接创建元素，然后加文本动态innerText加上去话，然后马上获取元素是获取不到的，处理过程较为艰辛，然后突然想到用的Angular何苦还要getElementById，直接componentRef就好了嘛。（如果有更好的方法请各位大佬指点一二）

然后就有了下面比较投机取巧的小方法了

首先在页面给加个元素

<span class="class-title"></span>

记得要加上样式，重点是不能显示出来，postion：absolute和visibility：hidden是需要的。

.class-title {
  max-width: 104px;
  font-size: 22px;
  position: absolute;
  overflow-y: scroll;
  visibility: hidden;
}

然后就是逻辑判断了，这里是通过判断是否有滚动条出现确认文本使出超出容器，如果是的，只好给他换个class啦～

import { Component, OnInit, ElementRef } from '@angular/core';
  
const titleElement = this.elementRef.nativeElement.querySelector(
      '.class-title'
    );
  
  const smallClassTitle = setTitleSmall(title, titleElement);

export const setTitleSmall = (title: string, titleElement: HTMLElement) => {
  let result = false;
  titleElement.innerText = title;
  if (titleElement.scrollHeight > titleElement.offsetHeight) {
    result = true;
  }
  return result;
};

今天的我依旧是小菜鸡～何时才能长大一丢丢～