7
votes

Trouvez la largeur du mot le plus large du bloc HTML

L'objectif est de trouver la largeur du mot le plus large ici.

Le texte est une phrase composée de mots avec des polices différentes, comme indiqué dans l'image.

 gammes de polices Le HTML ressemble à: xxx

Alors, le 3ème mot est le plus large. Des idées? Tout est HTML et nous pouvons utiliser n'importe quelle chose (JQuery, ES5 Techniques, etc.).


1 commentaires

Aimé la question! +1 pour le bon puzzle et l'imagerie ajoutée


3 Réponses :


1
votes

Je pense que cela prétend être une solution.

http://jsfiddle.net/wtceq/4/


7 commentaires

Peut-être besoin de diviser d'espace pour déterminer le mot en premier.


Oui, nous pouvons également supposer que "WhitSpace" est le seul délimiteur entre les mots. comme "12 000,22" est 1 mot


J'ai mis à jour mon code, maintenant, il devrait être plus flexible. jsfiddle.net/wtceq/13


UPD UPD: Désolé, j'ai oublié de ne pas changer la largeur des espaces entre les mots. JSFIDDLE.net/wtceq/18


@Gorshastin merci. C'est un cas étrange n'arrivant que dans Safari + Jsfiddle. Si vous l'essayez sur chrome ou FF, semble fonctionner correctement avec Regu-Ular comme 780. En outre, si vous remplacez "-" Char avec d'autres "_" _ "Cela fonctionne bien. Aussi, si je l'essaie sans Jsfiddle (qui rend le HTML sur iframe et probablement en utilisant "EVAL"), cela fonctionne bien


@sbr Je l'ai essayé à Chrome 21. Je pense que ce problème n'est pas avec le jsfiddle, mais avec le paramètre espace blanc. Si la page est trop étroite, "Regu-Ular" se brise au milieu. Par conséquent, dans mon violon, j'utilise de l'espace blanc: Nowrap pour éviter cela.


@Gorshastin merci. Une autre chose à noter est que "regu_ular" fonctionne bien. El.Width () La méthode renvoie des valeurs différentes en cas de "regu-ular" vs "regu_ular".



0
votes

Essayez ci-dessous la solution qui itière essentiellement sur toutes les étendues et trouve le mot le plus long. xxx

Démo: http://jsfiddle.net/wtceq/32/


0 commentaires

0
votes

Vous pouvez utiliser Max-Contenu Code> pour mesurer la largeur de pixels du texte.

p>

<span style="font:bold 14px Verdana;">LONGESTW</span>
<span style="font:bold 42px Verdana;">ORD</span>
<span style="font:bold 14px Verdana;">&nbsp;</span>
<span style="font:bold 24px Verdana;">ORD</span>
<span style="font:bold 14px Verdana;">&nbsp;</span>
<span style="font:bold 24px Verdana;">regular</span>
<span style="font:bold 14px Verdana;">&nbsp;</span>
<span style="font:bold 32px Verdana;">w</span>
<span style="font:bold 96px Verdana;">id</span>
<span style="font:bold 64px Verdana;">est</span> 

<div class="output"></div>


0 commentaires