Question

假设我有一个标签数组（字符串）。我在一个非常狭窄的视图上显示这些标签。

有些标签很小，所以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对它们进行排序。

＆＃13;

//Now use jQuery to sort the tags just after the rendering.

    $('.tag').sort( function(a,b) {
       return $(a).width() - $(b).width();
    }).appendTo('.container');

＆＃13;

 <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>

＆＃13;

我在标签中添加了<br/>仅用于查看。

基于像素中的字符串实际宽度对数组进行排序

1 个答案: