Tronquer un texte et en ajoutant des points de suspension dans le CSS

Je suis d'essayer de tronquer un paragraphe de texte et en ajoutant des points de suspension après pour indiquer qu'il y a plus de contenu.

J'ai tenté d'utiliser la propriété CSS text-overflow:ellipsis - cependant, l'examen des exemples de cela, il semble qu'il est seulement possible avec l'utilisation de no-wrap et donc il ne peut être utilisé sur une seule ligne de texte, donc pas approprié pour la troncature d'un paragraphe.

J'ai ensuite est venu avec un autre soltuion, qui est presque correct mais a juste un problème...

Ainsi, au lieu de les tronquer à l'aide de la ellipsis bien, j'ai tronqué à l'ancienne en utilisant overflow:hidden et réglage d'un max-height

.tourItem .tourInfo
{
max-height: 110px;
overflow: hidden;
display: block;
}

Puis à créer les propres points de suspension, j'ai utilisé :after

.tourItem .tourInfo:after {content:'...';}

Cela semble être la bonne façon cependant, j'ai couru dans deux problèmes...

  1. La overflow:hidden signifie que le :after contenu n'est pas spectacle. Mais c'est nécessaire car il est ce qui contrôle le texte tronqué!
  2. Les points de suspension (si vous prenez le overflow:hidden) sont indiquées en dessous de la section de texte. J'en ai besoin pour sembler comme il fait partie de la ligne de texte...

JS Fiddle pour aider

Si votre heureux d'aller vers le bas le plugin route, je voudrais vous recommandons de vérifier la jQuery dodotdot plugin qui peut vous aider avec ceci.

OriginalL'auteur Francesca | 2013-07-18

  1. 1

    J'ai échangé quelques styles autour et il fonctionne comme ceci! J'ai déplacé le max-height et overflow à la <p> tag à la place de la div. De cette façon, le div prend automatiquement la hauteur correcte du paragraphe, et vous pouvez maintenant utiliser l' :après le div, et de cacher la :after sur le vol stationnaire. À côté de cela j'ai aussi placé les "points" à droite de position.

    CSS

    .tourInfo {
    width:150px;
    display: block;
}

.tourInfo:after { /* position the dots */
     position:relative;
     background-color:white;
     left:138px;
     top:-16px;
    content:'...';
}
.tourInfo p{
    color:#666;
    font-size:13px;
    font-weight:normal;
    display:block;
    margin:0;
    overflow:hidden; /* overflow hidden on the <p> instead of the div */
    max-height: 110px;
}

.tourInfo:hover:after {
    display:none; /* hide after on hover */
}

.tourInfo:hover p {
    max-height:100%; /* change max-height on hover */
}

    VIOLON

    http://jsfiddle.net/jPM4R/3/

    Espère que cela vous aide!

    OriginalL'auteur koningdavid

  2. 0

    Je pense que vous devez envelopper tourInfo. De cette façon, vous pouvez donner tourInfo un pourcentage de la largeur pour laisser de la place pour les points de suspension.

    HTML

    <div class="bacon">
    <span class="tourInfo">
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </span>
</div>

    CSS

    .bacon{
    width: 150px;
    position: relative;
}

.tourInfo{
    height: 110px;
    width: 85%;
    display: block;
    overflow: hidden;
}

.tourInfo:after{
    content: '...';
    position: absolute;
    bottom: -3px;
    right: 18px;
}

    Cela pourrait probablement être affiné un peu, mais vous voyez l'idée.

    OriginalL'auteur Colin Bacon

  3. 0

    Je viens de faire un plugin jquery pour tronquer un texte à l'intérieur d'un conteneur HTML :

    https://github.com/AlirezaAsadi/truncatie

    Truncatie est un plugin jquery qui limite la taille du texte par des lignes à l'intérieur d'un conteneur html

    usagex

      $('big-text').truncatie({
       elipsis: '...',
       max: 2 /* Number of lines limitation */
   });

    # Entrée

     Truncatie is a jquery plugin
 that limit size of text by 
 lines within a html container

    # Outeput

     Truncatie is a jquery plugin
 that limit size of text by..
    Un exemple de code serait bien d'expliquer la solution plutôt que de simplement un lien vers un package que des liens peuvent changer ou être supprimé.

    OriginalL'auteur Alireza Asadi

  4. -1

    Avez-vous essayer de faire quelque chose de ce genre?

    <div class="content-ovh">
   <p class="text">Your text</p>
   <a href="#">More</a>
</div>

    Et le style:

    .content-ovh .text{
    witdh: yoursize px;
    height: yoursize px;
    overflow:hidden;
}
    Cela ne fonctionne pas comme par le contenu que j'ai. J'ai besoin de points de suspension, pas d'une lecture plus de bouton.
    Ok désolé, et à l'aide de votre deuxième option si vous affectez à l' <p> élément de la propriété "display:inline;" il va travailler. (Juste essayer sur votre codepen)

    OriginalL'auteur PaoloCargnin