Test de rupture de ligne

Question

Comment testez-vous si une entité HTML/caractère est incisive ou non à l'aide de JS?

exemples de caractères de saut de ligne:

• le bon vieux   < qui est un espace
• -

exemples de caractères insécables sont:

•   < insécable espace
• ‑ < tiret insécable
• ⁠ < mot-menuisier

Je sais qu'il ya beaucoup d'autres entités HTML qui sont ligne/caractères non-rupture, je ne indice ce qu'ils sont. Comment est-ce que je vérifie si l'on est en ligne sans savoir auparavant?

Answer 1

Vous pouvez le tester en créant une div de test avec une largeur minimale, puis vérifiez si le texte passe à la ligne suivante.

var tester=document.getElementById("test"); 
 
var html=document.getElementById("html").value; 
 

 
function testfor() { 
 
    var tester=document.getElementById("test"); 
 
    var html=document.getElementById("html").value; 
 
    var itIs=false; 
 
    tester.innerHTML="a"; 
 
    var height_init=tester.clientHeight; 
 
    console.log(height_init); 
 
    tester.innerHTML+=html+"a"; 
 
    var height_final=tester.clientHeight; 
 
    console.log(height_final); 
 
    if(height_final > height_init) { 
 
    \t itIs=true 
 
    } 
 
    document.getElementById("return").innerHTML=itIs; 
 
} 
 
document.getElementById("html").addEventListener("keydown", function(e) { 
 
    if (!e) { var e = window.event; } 
 

 
    // Enter is pressed 
 
    if (e.keyCode == 13) { testfor(); } 
 
}, false);

#test{ 
 
    width: 1px; 
 
    line-height: 30px; 
 
    font-size: 18px; 
 
}

<div id="test">this&nbsp;text&nbsp;box&nbsp;will&nbsp;take&nbsp;any&nbsp;length&nbsp;of&nbsp;string, and&nbsp;test&nbsp;if&nbsp;the&nbsp;lines&nbsp;break, however&nbsp;it&nbsp;was&nbsp;not&nbsp;designed&nbsp;to&nbsp;handle more&nbsp;than&nbsp;one&nbsp;character/entity/tag&nbsp;at&nbsp;a&nbsp;time</div> 
 
<input id="html" type="text" placeholder="type an HTML character/entity/tag"/> 
 
<p id="return"> 
 

 
</p>