Quatre façons d'implémenter des points de suspension de débordement de texte en CSS (avec code)

Ce que cet article vous apporte concerne les quatre méthodes pour réaliser des points de suspension de débordement de texte en CSS (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Dans le projet, cela implique d'ajouter des points de suspension après une ligne ou un certain nombre de lignes. Lors de l'ajout de points de suspension après une certaine ligne, les attributs -webkit-line-clamp et -webkit-box-orient sont. utilisé. Il y aura des situations où l'attribut webpack packaging-webkit-box-orient est ignoré. Voici un enregistrement de

Implémentation sur une seule ligne des points de suspension du texte

/* 这里要显示的设置宽度 */
overflow: hidden;
white-space: nowrap;
/* 文字超出宽度则显示ellipsis省略号 */
text-overflow: ellipsis;
width: 100%;

2. Quelle ligne implémente les points de suspension du texte

display: -webkit-box;
-webkit-box-orient: vertical;  /* 设置方向 */
-webkit-line-clamp: 2;  /* 设置超过为省略号的行数 */
overflow: hidden;

• Lors de l'utilisation l'outil d'empaquetage webpack, cela sera ignoré - attribut webkit-box-orient, remplacez-le simplement par la méthode d'écriture suivante

display: -webkit-box; 
overflow: hidden;
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
-webkit-line-clamp: 8;
text-overflow: ellipsis;

Utilisez js pour ajouter un. points de suspension après le nombre de mots

if (title.length > 26) {
  title = title.substring(0, 27) + "...";
}

4. Saut de mots et retour à la ligne

• espace blanc : normal (retour automatique à la ligne), lorsque le texte écrit dépasse la définition, il sera automatiquement renvoyé après la largeur du conteneur, mais lorsque les données écrites sont un groupe de caractères, de lettres ou de chiffres sans espaces et dépassent la largeur du conteneur, le conteneur sera développé sans emballage

• Vous pouvez utiliser : word-break:break-all;word-wrap:break-word pour résoudre le problème

• word-break:break-all Lorsque la largeur du conteneur est dépassée, si Si un mot est très long, le mot sera tronqué et écrit séparément

• word-wrap : break-word Lorsque la largeur du conteneur est dépassée, si un mot est très long, le mot sera Mettez-le sur la ligne suivante sans tronquer le mot

word-break : normal | break-all | keep-all

normal : Autoriser les sauts de ligne dans les mots
break- all : Autoriser les sauts de ligne dans les mots
keep-all : Uniquement les sauts de ligne aux espaces demi-largeur ou aux tirets.

word-wrap : normal | break-word
normal : Autoriser le contenu à dépasser la limite spécifiée du conteneur
break-word : Le contenu sera renvoyé à l'intérieur de la limite. Si nécessaire, des sauts de mots se produisent également

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!