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

Dans bootstrap 4, vous pouvez ajouter une classe .text-truncate pour tronquer le texte avec des points de suspension.

  I like big butts and I cannot lie

Answer 2

.cardDetaileclips{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* après 3 lignes affichent ... */
    -webkit-box-orient: vertical;
}

    Mon nom est Manoj et je suis ravi de pouvoir vous aider.

Answer 3

    .dots
    {
        display: inline-block;
        width: 325px;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }

    .dot
    {
        display: inline-block;
        width: 185px;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }

Answer 4

Masquer le texte au chargement et afficher au survol

.hide-text {
  width: 70px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}

span:hover {
   white-space: unset;
   text-overflow: unset;
}

 Comment masquer le texte par des points et afficher le texte au survol

Answer 5

La plupart des solutions utilisent une largeur statique ici. Mais cela peut parfois être incorrect pour certaines raisons.

Exemple: J'avais un tableau avec de nombreuses colonnes. La plupart d'entre elles sont étroites (largeur statique). Mais la colonne principale devrait être aussi large que possible (en fonction de la taille de l'écran).

HTML:

    étroit

        La colonne dynamique peut contenir un texte vraiment long qui peut être coupé en deux lignes, mais nous avons juste besoin de textes non coupés utilisant autant d'espace que possible

CSS:

.cutwrap {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 18px;
  white-space: normal;
  color: transparent !important;
}
.cutwrap::selection {
  color: transparent !important;
}
.cutwrap:before {
  content: attr(data-cutwrap);
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
}
/* différents styles pour les liens */
a.cutwrap:before {
  text-decoration: underline;
  color: #05c;
}