javascript - 如何使用 css 预测基于字符串的跨度宽度？

Question

edit 1 :宽度似乎取决于很多参数。但我不需要完美的宽度，即使宽度比最长的单词还宽，也没关系，因为我会将文本居中对齐以提高可见性。

---

我有一个 javascript 框架，可以构建翻译单词的字典。因此，我从以下形式的服务器获得了一个 json:

[
 {"word":"house", "translation":"maison"},
 {"word":"dog", "translation":"chien"},
 ...
]

列表的构建如下:

<ul>
  <li ng-repeat="i in list">
      <span class="word">{{ i.word }}</span>
      <span class="translation">{{ i.translation }}</span>
  </li>
...
</ul>

span 都将是:

span {
  position: absolute;
  top: 0;
  left: 0;
}

并且 li 需要是 word 和 translation 之间最长单词的宽度。

在我的脚本中，当收到 json 时，我需要执行计算以保存 li 的宽度，所以我可以写

<ul>
  <li ng-repeat="i in list" style="width:{{ i.width }}">...</li>
  ...
</ul>

我的问题是如何根据字符串计算跨度的宽度。我的计算需要包括哪些 CSS 属性？

注意:即使我使用 Angular，我也不一定只使用 Angular 指令，我可以使用纯 JavaScript 代码。

Answer 1

你可以制作一个虚拟跨度并获得它的宽度，如下所示:

var span = angular.element('<span>')
.css({ position: 'absolute', left: '-5000px', display: 'block' });
var widest = 0;
angular.forEach(array, function (item) {
    angular.element('body').append(span.html(item.word));
    if (span.width() > widest) {
        widest = span.width() ;
    }
    //'angular.element' or '$' if there is jQuery in the page
    angular.element('body').append(span.html(item.translation));
    if (span.width() > widest) {
        widest = span.width() ;
    }
    span.remove();
});

这没有经过测试，但应该可以。