Maison > Article > interface Web > Comment réaliser l'omission de l'affichage au-delà de deux lignes en CSS

Comment réaliser l'omission de l'affichage au-delà de deux lignes en CSS

藏色散人original: 2021-04-02 14:45:4452391parcourir

Méthode CSS pour implémenter l'omission d'affichage au-delà de deux lignes : créez d'abord un exemple de fichier HTML ; puis définissez le contenu du texte dans le corps ; enfin définissez l'attribut "-webkit-line-clamp: 2;overflow" dans le style : Hidden;" pour obtenir l'effet au-delà de l'omission.

L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur DELL G3

CSS se rend compte que le texte dépasse la partie et dépasse deux lignes. La partie excédentaire du texte est affichée avec des points de suspension

La partie excédentaire du texte est affichée avec des points de suspension

<style>
.p{
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
<body>
    <p class="p">
        我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本
    </p>
</body>

Le le texte dépasse deux lignes, la partie excédentaire du texte est affichée avec des points de suspension

<style>
.p{
    width: 200px;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 这里是超出几行省略 */
    overflow: hidden;
}
</style>
<body>
    <p class="p">
        我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本
    </p>
</body>

Apprentissage recommandé : "tutoriel vidéo 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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter un carrousel d'images en utilisant du CSS purArticle suivant：Comment implémenter un carrousel d'images en utilisant du CSS pur

Articles Liés

Voir plus