Avec CSS, utiliser «... » pour bloc de débordements de lignes multiples

Question

avec

«... » s’affichera à la fin de la ligne si débordé. Toutefois, il sera montré que dans une seule ligne. Mais je voudrais qu’il paraître dans plusieurs lignes.

Elle peut ressemble à :

Answer 1

Il y a aussi plusieurs plugins jquery qui traitent de cette question, mais beaucoup ne gèrent pas de plusieurs lignes de texte. Celui qui semble fonctionner c’est : http://pvdspek.github.com/jquery.autoellipsis/

Un exemple : http://jsfiddle.net/VpmbL/

Answer 2

J'ai piraté autour jusqu'à ce que j'ai réussi à faire quelque chose proche de cela. Il est livré avec quelques mises en garde:

1. Il n'est pas pur CSS; vous devez ajouter quelques éléments HTML. Il n'y a cependant pas de JavaScript requis.
2. Les points de suspension est aligné à droite sur la dernière ligne. Cela signifie que si votre texte n'est pas aligné à droite ou justifié, il peut y avoir un écart notable entre le dernier visible la parole et les points de suspension (en fonction de la longueur du premier mot caché).
3. L'espace pour les points de suspension est toujours réservé. Cela signifie que si le texte s'inscrit dans la zone près de précision, il peut être inutilement tronquée (le dernier mot est caché, bien qu'il ne serait techniquement pas le faire).
4. Votre texte doit avoir un arrière-plan fixe de la couleur, puisque nous sommes à l'aide de rectangles colorés pour cacher les points de suspension dans les cas où il n'est pas nécessaire.

Je tiens également à noter que le texte sera interrompue à une limite de mot, pas un caractère de délimitation. C'était un acte délibéré (comme je pense que le mieux pour des textes plus longs), mais parce qu'il est différent de ce qu' text-overflow: ellipsis n', j'ai pensé que je devrais le mentionner.

Si vous pouvez vivre avec ces mises en garde, le code HTML ressemble à ceci:

<div class="ellipsify">
    <div class="pre-dots"></div>
    <div class="dots">&hellip;</div>
    <!-- your text here -->
    <span class="hidedots1"></span>
    <div class="hidedots2"></div>
</div>

Et c'est le CSS correspondant, à l'aide de l'exemple de 150 pixels de large boîte avec trois lignes de texte sur un fond blanc. Cela suppose que vous ayez un CSS reset ou similaire qui définit les marges externes et internes à zéro si nécessaire.

/* the wrapper */
.ellipsify {
    font-size:12px;
    line-height:18px;
    height: 54px;       /* 3x line height */
    width: 150px;
    overflow: hidden;
    position: relative; /* so we're a positioning parent for the dot hiders */
    background: white;
}

/* Used to push down .dots. Can't use absolute positioning, since that
   would stop the floating. Can't use relative positioning, since that
   would cause floating in the wrong (namely: original) place. Can't 
   change height of #dots, since it would have the full width, and
   thus cause early wrapping on all lines. */
.pre-dots {
    float: right;
    height: 36px;  /* 2x line height (one less than visible lines) */
}

.dots {
    float: right; /* to make the text wrap around the dots */
    clear: right; /* to push us below (not next to) .pre-dots */
}

/* hides the dots if the text has *exactly* 3 lines */
.hidedots1 {
    background: white;
    width: 150px;
    height: 18px;       /* line height */
    position: absolute; /* otherwise, because of the width, it'll be wrapped */
}

/* hides the dots if the text has *less than* 3 lines */
.hidedots2 {
    background: white; 
    width: 150px;
    height: 54px;       /* 3x line height, to ensure hiding even if empty */
    position: absolute; /* ensures we're above the dots */
}

Le résultat ressemble à ceci:

Afin de clarifier la façon dont il fonctionne, voici la même image, sauf qu' .hidedots1 est mise en évidence en rouge, et .hidedots2 cyan. Ce sont les rectangles de masquer les points de suspension quand il n'y a pas de texte invisible:

Testé dans IE9, IE8 (émulé), Chrome, Firefox, Safari et Opera. Ne fonctionne pas dans IE7.

Answer 3

Voici une des dernières css-tricks article qui traite de ce type.

Certaines des solutions proposées dans l'article ci-dessus (qui ne sont pas mentionnés ici)

1) -webkit-line-clamp et 2) Placer une position absolue de l'élément en bas à droite avec fade out

Les deux méthodes supposent le balisage suivant:

<div class="module"> /* Add line-clamp/fade class here*/
  <p>Text here</p>
</div>

avec les css

.module {
  width: 250px;
  overflow: hidden;
}

1) -webkit-ligne-clamp

ligne-clamp VIOLON (..pour un maximum de 3 lignes)

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  max-height: 3.6em; /* I needed this to get it to work */
}

2) fade out

Disons que vous réglez la hauteur de la ligne de 1.2 em. Si nous voulons exposer trois lignes de texte, on peut faire juste à la hauteur du conteneur 3.6 em (1.2 em × 3). Le caché dépassement de permet de masquer le reste.

Fade out VIOLON

p
{
    margin:0;padding:0;
}
.module {
  width: 250px;
  overflow: hidden;
  border: 1px solid green;
  margin: 10px;
}

.fade {
  position: relative;
  height: 3.6em; /* exactly three lines */
}
.fade:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 1.2em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

Solution #3 - Une combinaison à l'aide de @soutient

Nous pouvons utiliser @soutient à appliquer webkit ligne de serrage sur les navigateurs webkit et d'appliquer le fondu dans d'autres navigateurs.

@soutient la ligne de serrage avec fondu de secours violon

<div class="module line-clamp">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

CSS

.module {
  width: 250px;
  overflow: hidden;
  border: 1px solid green;
  margin: 10px;
}

.line-clamp {
      position: relative;
      height: 3.6em; /* exactly three lines */
    }
.line-clamp:after {
      content: "";
      text-align: right;
      position: absolute;
      bottom: 0;
      right: 0;
      width: 70%;
      height: 1.2em;
      background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
 }

@supports (-webkit-line-clamp: 3) {
    .line-clamp {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;  
        max-height:3.6em; /* I needed this to get it to work */
        height: auto;
    }
    .line-clamp:after {
        display: none;
    }
}

Answer 4

Le lien ci-dessous fournit un pur HTML / solution CSS à ce problème. Toutefois, il est très impliqué et très probablement ne fonctionnera pas dans les navigateurs non moderne :

http://www.mobify.com/dev/Multiline-Ellipsis-in-Pure-CSS

le css :

le code html :

le fiddle

(redimensionner la fenêtre du navigateur pour tester)

Answer 5

Après recherche sur le W3 spec pour text-overflow, je ne pense pas que ce soit possible en utilisant uniquement CSS. L'ellipse est un nouveau-ish de la propriété, de sorte qu'il n'a probablement pas reçu beaucoup de l'utilisation ou de la rétroaction.

Cependant, ce gars semble avoir demandé à un semblable (ou identiques) de la question, et que quelqu'un était en mesure de venir avec une belle jQuery solution. Vous pouvez démo de la solution ici: http://jsfiddle.net/MPkSF/

Si javascript n'est pas une option, je pense que vous pouvez être hors de la chance...