Enveloppez un texte sur deux lignes seulement à l'intérieur d'un div.

Question

Je veux envelopper un texte dans seulement deux lignes à l'intérieur d'un div de largeur spécifique. Si le texte dépasse la longueur de deux lignes, je veux afficher des ellipses. Existe-t-il un moyen de faire cela en utilisant les CSS ?

par exemple

Sample text showing wrapping
of text in only two line...

Answer 1

Il est possible de limiter la sortie à deux lignes de texte avec CSS, si vous définissez l'attribut line-height y height de l'élément, et définir overflow:hidden; :

#someDiv {
    line-height: 1.5em;
    height: 3em;       /* height is 2x line-height, so two lines will display */
    overflow: hidden;  /* prevents extra lines from being visible */
}

--- jsFiddle DEMO ---

Vous pouvez également utiliser les CSS text-overflow y white-space pour ajouter des ellipses, mais cela ne semble fonctionner que pour une seule ligne.

#someDiv {
    line-height: 1.5em;
    height: 3em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
}

Et une démo :

--- jsFiddle DEMO ---

Réaliser à la fois des lignes de texte multiples et des ellipses semble être le domaine du javascript.

Answer 2

Une autre solution simple et rapide

.giveMeEllipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /* number of lines to show */
   line-height: X;        /* fallback */
   max-height: X*N;       /* fallback */
}

La référence à la question et à la réponse originales est aquí

Answer 3

CSS uniquement

    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

Answer 4

Le meilleur que j'ai vu, qui est uniquement CSS et réactif, vient de Blog des développeurs Mobify - Ellipses CSS : Comment gérer les ellipses multilignes dans le pur CSS ? :

Exemple de violon JS

CSS :

html, body, p { margin: 0; padding: 0; font-family: sans-serif;}

.ellipsis {
    overflow: hidden;
    height: 200px;
    line-height: 25px;
    margin: 20px;
    border: 5px solid #AAA; }

.ellipsis:before {
    content:"";
    float: left;
    width: 5px; height: 200px; }

.ellipsis > *:first-child {
    float: right;
    width: 100%;
    margin-left: -5px; }        

.ellipsis:after {
    content: "\02026";  

    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    float: right; position: relative;
    top: -25px; left: 100%; 
    width: 3em; margin-left: -3em;
    padding-right: 5px;

    text-align: right;

    background: -webkit-gradient(linear, left top, right top,
        from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);           
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); }

Html :

<div class="ellipsis">
    <div class="blah">
        <p>Call me Ishmael. Some years ago &ndash; never mind how long precisely &ndash; having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen, and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off &ndash; then, I account it high time to get to sea as soon as I can.</p>
    </div>
</div>

Answer 5

Je crois que la solution CSS uniquement text-overflow: ellipsis ne s'applique qu'à une seule ligne, vous ne pourrez donc pas suivre cette voie :

.yourdiv {

    line-height: 1.5em; /* Sets line height to 1.5 times text size */
    height: 3em; /* Sets the div height to 2x line-height (3 times text size) */
    width: 100%; /* Use whatever width you want */
    white-space: normal; /* Wrap lines of text */
    overflow: hidden; /* Hide text that goes beyond the boundaries of the div */
    text-overflow: ellipsis; /* Ellipses (cross-browser) */
    -o-text-overflow: ellipsis; /* Ellipses (cross-browser) */
}

Avez-vous essayé http://tpgblog.com/threedots/ pour jQuery ?