简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel CSS > le corps du texte

Lorsqu'il y a trop de texte sur la page, comment utiliser les CSS pour afficher les ellipses en excès ? (Démonstration de code simple/multiligne)

藏色散人
Libérer： 2018-08-09 16:04:19
original
2376 Les gens l'ont consulté

Lorsque le texte d’une page est trop long, cela nuit non seulement à l’expérience visuelle de l’utilisateur, mais également à l’optimisation du site Internet. Alors, comment pouvons-nous utiliser CSS pour afficher des points de suspension dans la partie étendue ? Cet article vous donnera une introduction détaillée sur la façon d'afficher les points de suspension dans la partie excédentaire du CSS ? J'espère que cela aidera ceux qui en ont besoin !

L'exemple de code spécifique pour afficher les points de suspension dans la partie excédentaire du CSS est le suivant : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css超出部分省略显示测试</title>
    <style>
        .app {
            width: 400px;
            height: 28px;
            line-height: 28px;
            margin: 50px 0 0 50px;
            border: 1px solid red;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
<div class="app">
    <span class="content">php中文网(php.cn)提供大量免费、原创、高清的php视频教程,在学习的时候可以直接在线修改示例,查看php执行效果是本站的一大特色,php从入门到精通，一站式php自学平台。</span>
</div>
</body>
</html>
Copier après la connexion

L'effet est le suivant :

Lorsquil y a trop de texte sur la page, comment utiliser les CSS pour afficher les ellipses en excès ? (Démonstration de code simple/multiligne)

Remarque : ce qui précède consiste à implémenter l'affichage de débordement des points de suspension sur une seule ligne de texte à l'aide de l'attribut text-overflow:ellipsis. L'attribut width doit également être ajouté pour être compatible. avec un peu de navigation.

Ensuite si vous savez faire fonctionner une seule ligne, ce sera simple pour plusieurs lignes. La méthode d'implémentation multiligne est principalement le code suivant : 

display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;
Copier après la connexion

css dépasse la portée compatible de la partie omise :
En raison de l'utilisation des attributs étendus CSS de WebKit, cette méthode convient à Navigateurs WebKit et terminaux mobiles ;

Remarque :

-webkit-line-clamp est utilisé pour limiter le nombre de lignes de texte affichées dans un élément de bloc. Pour obtenir cet effet, il doit être combiné avec d'autres propriétés WebKit. Attributs couramment combinés :

display: -webkit-box ; Attributs qui doivent être combinés pour afficher l'objet sous forme de modèle de boîte flexible.

-webkit-box-orient doit être combiné avec l'attribut pour définir ou récupérer la disposition des éléments enfants de l'objet flex box.


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!

Étiquettes associées：
css使超出部分显示省略号
source：php.cn
Article précédent：Quelles sont les pseudo-classes ajoutées en CSS3 et quelles sont leurs fonctions ? Article suivant：Code d'implémentation de boîtes à bulles utilisant des pseudo-éléments en CSS3 (avant, après)
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Marge droite inexpliquée lorsque la page n'est pas en plein écran - Nuxt/Tailwinds J'essaie de créer une simple page de CV en utilisant Nuxt, Vue3 et TailwindCSS. Lorsque mo...
Depuis 2023-09-01 00:05:46
0
1
256
Caractères spéciaux causant des problèmes avec la validation Joi Je souhaite limiter le contenu de la zone de texte à 250 mots. J'utilise la validation Joi...
Depuis 2023-08-31 09:52:18
0
1
240
Erreurs d'analyse/syntaxe PHP ; et comment les résoudre Tout le monde rencontre des erreurs de grammaire. Même les programmeurs expérimentés font ...
Depuis 2023-08-23 16:16:57
0
2
253
javascript - Le graphique carrousel CSS s'adapte au problème de mise en page Semblable à la disposition du carrousel, le conteneur bleu externe n'a pas de largeur défi...
Depuis 2017-06-13 09:23:41
0
3
819
javascript - Comment afficher des points de suspension lorsqu'il y a trop de pages en utilisant la pagination footable La page actuelle vers laquelle je veux me transformer est la suivante. Je ne trouve pas co...
Depuis 2017-05-19 10:25:16
0
1
324
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！