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

Question

编辑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();
});

这未经测试，但应该可以。

Answer 2

为什么不使用字符串中的字符数和字体粗细来计算宽度，例如

<li ng-repeat="i in list" ng-style="width= (i.width.length * 5)}">...</li>
<li ng-repeat="i in list" ng-style="width= (i.translation.length * 5)">...</li>