javascript - 标题工具提示间距问题

Question

我使用了 padEnd 来为标题中的字符串和绑定(bind)提供相等的空间。当我安慰字符串时。该字符串与空格完美对齐，但绑定(bind)的标题看起来不同。标题支持空格吗？

代码

arr = [{ name: "Rasagula", carbs: 16.6 },{ name: "Masala Vada", carbs: 16.2 },{ name: "Veg Bonda", carbs: 8.1 }];
  ngOnInit() {
    this.manipulateArr();
  }
  manipulateArr() {
    var carbs = this.arr.map(k => k.carbs);
    var items = this.arr.map(k => k.name);
    this.printThis = items.map((x, i) => {
    this.spacePad(x) + " : " + carbs[i] + "(g)";
    }).join('/n');
  }
  spacePad(value) {
    return value.padEnd(25);
  }

HTML

<td title={{printThis}}>Some Values</td>

控制台

我的观点

Answer 1

工具提示是根据 title 属性生成的，但它是由您的操作系统呈现的，并且使用与您的网页不同的字体系列。看起来它不是等宽字体，这意味着字母的宽度不相等。然而，浏览器的控制台大多使用等宽字体，这就是为什么它在那里显示对齐，但在工具提示中不对齐。遗憾的是，您无法设置工具提示的样式，但您可以使用工具提示库，通过在 DOM 内渲染文本来实现此目的。