根據字符串實際寬度以像素爲單位對數組排序

假設我有一個標記（字符串）數組。我在相當窄的視圖上顯示這些標籤。根據字符串實際寬度以像素爲單位對數組排序

一些標籤很小，所以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 |

我怎樣才能輕鬆地評估他們的呈現寬度從他們的字符串（也許到字體的引用），我該怎麼樣數組根據此前計算的寬度？我需要這樣一個陣營組件

輸出應該

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

，使他們能夠顯示這樣

| iiii iiii | 
| mmm |

來源

2017-08-10 Cyril Duchon-Doris

也許相關：HTML5 Canvas.measureText https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript –

使用一個monotype字體，問題消失 – adeneo

您可以讓[引擎計算DOM元素的寬度]（https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth）並相應地對它們進行排序。只是一個想法... – Redu

可以渲染標籤像下面和使用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 
 
\t \t \t src="http://code.jquery.com/jquery-3.2.1.min.js" 
 
\t \t \t integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
 
\t \t \t crossorigin="anonymous"></script>

我加入標籤<br/>只是知名度。

來源

2017-08-10 22:38:37

嘿，你有沒有類似的jQuery使用reactJS？ –

根據字符串實際寬度以像素爲單位對數組排序

回答

相關問題