Comment empêcher la césure en utilisant le débordement de texte
P粉464208937
2023-09-03 15:00:49
<p>J'essaie de définir un nombre maximum de lignes pour certains titres, mais le problème est que parfois une ligne se termine par un trait d'union. Ce dont j'ai besoin, c'est que si un mot doit être brisé, il doit être complètement caché et les ellipses placées après le mot précédent. </p>
<p>Ce code montre le problème : </p>
<p>
<pre class="brush:css;toolbar:false;">#head {
largeur : 300 px ;
taille de police : 20 px ;
affichage : -webkit-box !important ;
couleur : #000000 !important ;
débordement de texte : points de suspension !important ;
-webkit-line-clamp : 4 !important;
-webkit-box-orient : vertical !important ;
débordement : caché !important ;
}</pré>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html>
<div id="head">
Lorem Ipsum est simplement un texte factice de l'industrie de l'imprimerie et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, lorsqu'un imprimeur inconnu a pris une galère de caractères et l'a brouillée pour en faire un texte factice.
</div>
</html></pre>
</p>
<p>Il y a une coupure dans le mot « jamais », puis-je empêcher que cela se produise ? </p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Pour masquer complètement la césure et placer les points de suspension après le mot précédent, vous pouvez utiliser JavaScript pour manipuler le contenu du texte. Voici un exemple de la façon de modifier votre code pour y parvenir :
function truncateText(element, maxLength) { const text = element.innerText; if (text.length <= maxLength) return; const truncatedText = text.slice(0, maxLength); const lastSpaceIndex = truncatedText.lastIndexOf(' '); element.innerText = truncatedText.slice(0, lastSpaceIndex) + '...'; } const headlineElement = document.getElementById('headline'); truncateText(headlineElement, 100);#head { width: 300px; font-size: 20px; display: -webkit-box !important; color: #000000 !important; -webkit-line-clamp: 4 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }<div id="head"> <span id="headline"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a </span> </div>Dans ce code, la fonction JavaScript
truncateTextest utilisée pour tronquer le contenu du texte lorsqu'il dépasse la longueur maximale spécifiée. Cette fonction trouve le dernier caractère espace dans la longueur maximale et remplace le texte restant par des points de suspension.Vous pouvez ajuster le paramètre
maxLengthau nombre de caractères souhaité avant d'ajouter les points de suspension.