标题工具提示间距问题

Question

我已经使用padEnd来保留字符串和标题中相同的空格。当我控制台字符串时。字符串与空格完全对齐，但绑定的标题看起来不同。标题支持空格吗？

代码

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属性生成的，但是由您的OS呈现，并且使用的字体家族与您的网页不同。看来它不是等宽字体，这意味着字母的宽度不相等。但是，浏览器的控制台通常使用等宽字体，这就是为什么它在此处显示为对齐，而不是在工具提示中对齐的原因。遗憾的是，您无法设置工具提示的样式，但是可以使用工具提示库，通过在DOM中呈现文本来实现此目的。

Answer 2

控制台中使用的字体是等宽字体，这意味着每个字符具有完全相同的宽度，默认情况下，Web浏览器不使用等宽字体。

要强制使用等宽字体，可以使用以下CSS规则：

dir \*.*

您将必须创建自己的工具提示。

font-family: monospace;

Answer 3

尝试使用受限字符

spacePad(value) {
    return value.substr(0, 19).padEnd(25);
  }