javascript - 根据以像素为单位的字符串实际宽度对数组进行排序

Question

假设我有一组标签(字符串)。我在非常狭窄的 View 中显示这些标签。

有些标签非常小，因此 2 个可以放在同一行。否则，每行一个标签。

理想情况下，如果多个标签可以放在同一行，我希望这发生在第一行。

所以我需要一种方法来评估这些字符串占用的空间并对我的标签数组进行排序，以便最短的字符串(呈现时)排在第一位。

使用以下函数按长度(char 数组的长度)对字符串进行排序不起作用

{
  item.tags
    .sort(({ name }) => name.length)
    .map(({ name }, k) =>
    <li key={k}>#{name}</li>
  )
}

示例:

• 假设我的线可以容纳 50 个像素。
• 假设字母“i”使用 5 个像素，字母“m”使用 15(任意)

• 给定标签(按此顺序)

  [ 
    "iiiii" (25px), 
    "mmm" (45px), 
    "iiiii" (25px) 
  ]
  

由于它们的实际呈现宽度，在 HTML 中会像这样呈现

|   iiii    |
|    mmm    |
|   iiii    |

我怎样才能从他们的字符串(可能还有对字体的引用)中轻松地评估他们呈现的宽度，我怎样才能根据这个先前计算的宽度对数组进行排序？我需要这个用于 React 组件

输出应该是

[ 
  "iiiii" (25px), 
  "iiiii" (25px), 
  "mmm" (45px)
]

所以他们可以这样显示

| iiii iiii |
|    mmm    |

Answer 1

您可以像下面这样渲染标签并使用 jQuery 对它们进行排序。

//Now use jQuery to sort the tags just after the rendering.

    $('.tag').sort( function(a,b) {
       return $(a).width() - $(b).width();
    }).appendTo('.container');

 <div class="container">
  <i class="tag">iiii <br/></i> <!-- => (25px) -->
  <i class="tag">mmm <br/></i>  <!-- => (45px) -->
  <i class="tag">iiii <br/></i> <!-- => (25px) -->
</div>
<script
			  src="http://code.jquery.com/jquery-3.2.1.min.js"
			  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
			  crossorigin="anonymous"></script>

我添加了 <br/>在标签中只是为了可见性。