Débordement:caché points à la fin

Question

Supposons que j'ai une chaîne "J'aime les gros culs et je ne peux pas mentir" et que je la coupe avec overflow:hidden, ce qui affiche quelque chose comme ceci :

J'aime les gros culs et je cann

en coupant le texte. Est-il possible d'afficher cela comme ceci :

J'aime les gros culs et je cann...

en utilisant du CSS?

Answer 1

Vous pouvez utiliser text-overflow: ellipsis; qui selon caniuse est pris en charge par tous les principaux navigateurs.

Voici une démonstration sur jsbin.

.cut-text { 
  text-overflow: ellipsis;
  overflow: hidden; 
  width: 160px; 
  height: 1.2em; 
  white-space: nowrap;
}

I like big butts and I can not lie.

Answer 2

Vérifiez le snippet suivant pour votre problème

div{
  width : 100px;
  overflow:hidden;
  display:inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

    La mission Alsos était une unité alliée formée pour enquêter sur les développements scientifiques de l'Axe, en particulier les armes nucléaires, chimiques et biologiques, dans le cadre du projet Manhattan pendant la Seconde Guerre mondiale. Le colonel Boris Pash, ancien P

Answer 3

Essayez ceci si vous voulez limiter les lignes jusqu'à 3 et après trois lignes les points de suspension apparaîtront. Si nous voulons augmenter les lignes, il suffit de changer la valeur de -webkit-line-clamp et de donner la largeur pour la taille de la div.

div {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
}

Answer 4

Je l'espère utile pour vous:

.text-with-dots {
    display: block;
    max-width: 98%;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

Certains textes ici Certains textes ici Certains textes ici Certains textes ici Certains textes ici Certains textes ici

Answer 5

Oui, via la propriété text-overflow en CSS 3. Attention : elle n'est pas encore universellement prise en charge dans les navigateurs.