Le débordement de texte affiche automatiquement la méthode CSS des ellipses

Cette fois, je vais vous présenter la méthode CSS pour afficher automatiquement les points de suspension lorsque le texte déborde. Quelles sont les précautions pour afficher automatiquement les points de suspension CSS lorsque le texte déborde. Voici un cas pratique, jetons un coup d'œil.

Nous rencontrons souvent trop de texte. Afin de ne pas casser la mise en page originale, nous devons remplacer le texte supplémentaire par des ellipses pour obtenir les effets suivants :

• Mme. .Texte Il y en a tellement...

• Ce n'est pas grand chose.

html : Ceci est une liste. Les deux ul/ol vont bien.

<ul>
    <li>这是个短句子</li>
    <li>403是因为服务器拒绝了你的地址请求，或者你根本没权限访问网站，提供身份验证也没用，也就是说，用户被禁止访问了。然而除非与Web服务器管理员联系，否则一旦遇到403状态码都无法自行解决。</li></ul>

Tout d'abord, le code css des points de suspension est : text-overflow: points de suspension; Notez que cette ligne de code ne fonctionne souvent pas car elle doit remplir deux conditions : 1. La largeur doit être définie ; 2. Définir white-space : nowrap (pas de retour à la ligne) et overflow : caché (la partie excédentaire est masquée) en même temps. Par conséquent, le code CSS complet :

li {
    width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display:inline-block;//如果是一个inline标签，还需要加入这一行代码，因为对于inline标签，设置width没有用。这里是li标签，本来就是block，因此不需要。}

Cependant, voici le problème. Après avoir défini le débordement : caché sur li, le list-style-type de la liste entière ne fonctionne pas. encore une fois, quel que soit le type de petite icône définie, cela ne sert à rien. L'effet est le suivant :

Solution : ul add settings list-style-position: inside;

Mais ! ! ! À ce stade, l'icône est affichée et le texte de débordement est masqué, mais les points de suspension sont introuvables. . . .

Au final, je ne sais pas pourquoi ça fait un tel effet. Cependant, j'ai un esprit indomptable et j'ai recommencé. . . .

J'ai changé d'avis et modifié le style dans la liste, ce qui affecte tout le corps. Je vais envelopper le texte avec des points de suspension avec et cela le résoudra.

<ul>
    <li><span>这是个短文字</span></li>
    <li><span>403是因为服务器拒绝了你的地址请求，或者你根本没权限访问网站，提供身份验证也没用，也就是说，用户被禁止访问了。然而除非与Web服务器管理员联系，否则一旦遇到403状态码都无法自行解决。</span></li></ul>

Code CSS :

span{
    width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display:inline-block;//span是一个inline标签，设置width没有用。因此需要这句代码。}

ul{
    list-style-type:circle;
    /*list-style-position: inside;注意，不需要添加这行代码*/
}

Hahaha. . . . Finalement c'est arrivé ! ! ! ! Il existe à la fois des symboles de liste et des ellipses.

Conclusion : lors de la définition du texte de débordement, ne le définissez pas directement sur la balise li, car il y aura des problèmes de type de style de liste, ou enveloppez-le dans span et définissez les points de suspension span.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Connaissance de base du HTML dans le front-end

Position du modèle de boîte flottante CSS

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!