Comment puis-je éviter d'avoir un seul mot pendant sur une nouvelle ligne dans un élément HTML?
Je construis une simple page Web avec du contenu marketing. Une chose que je n’aime pas, c’est que si une ligne de texte est trop longue, elle s’enroulera sur la ligne suivante, ce qui est bien , mais elle se termine souvent de telle sorte qu’il n’y ait qu’un mot. nouvelle ligne, ce qui n’est que de mauvaises nouvelles du point de vue de la conception.
Telle et telle ne doit pas être difficile. Tel ou tel produit le rend
facile
Que puis-je faire pour assurer de manière dynamique au moins deux mots sur chaque ligne de suspension?
Telle et telle ne doit pas être difficile. Tel ou tel produit fait
c'est facile
La solution simple consiste à utiliser un espace insécable entre les deux derniers mots à la fin d'un paragraphe.
<p>Such and such doesn't have to be difficult. Such and such product makes it easy</p>
Cela peut devenir fastidieux si vous avez beaucoup de contenu et surtout s'il est contrôlé par les entreprises. Dans ce cas, vous pourrez peut-être trouver une bibliothèque ou écrire une solution qui insérera automatiquement un espace insécable entre les deux derniers mots de chaque paragraphe.
Essayez ceci: https://matthewlein.com/tools/widowfix
EDIT: La meilleure réponse est beaucoup plus propre - vous devriez probablement l'utiliser à la place. Je laisse ma réponse en suspens car cela fonctionne et qu'il a une certaine valeur pour les cas étranges (par exemple, si vous utilisez un tiret au lieu d'un espace, si vous ne souhaitez pas utiliser , etc.).
Voici une petite solution soignée. Créez une classe CSS comme ceci:
.nobr { white-space:nowrap; }
Aucun élément de la classe "nobr" ne sera autorisé à insérer des espaces (espaces, tabulations, etc.) sur de nouvelles lignes. Donc, entourez simplement les deux derniers mots de votre texte d'un span.nobr.
<p>Such and such doesn't have to be difficult. Such and such product makes <span class="nobr">it easy</span></p>
Je voudrais utiliser une balise <nobr>last two words.</nobr>.
Cela donne également l’avantage de ne pas couper l’épanouissement de HTML que vous pourriez avoir, par exemple:
<b>“</b>Here's a big statement I don't want <nobr>cutting off<b>”</b>.</nobr>