com

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

"..." será mostrado no final da linha se estiver excedido. No entanto, isso será mostrado apenas em uma linha. Mas gostaria que fosse mostrado em várias linhas.

Pode parecer com:

+--------------------+
|abcde feg hij   dkjd|
|dsji jdia js ajid  s|
|jdis ajid dheu d ...|/*Here it's overflowed, so "..." is shown. */
+--------------------+

Existem também vários plugins jquery que lidam com esse problema, mas muitos não lidam com várias linhas de texto. Trabalhos seguintes:

• http://pvdspek.github.com/jquery.autoellipsis/
• http://dotdotdot.frebsite.nl/
• http://keith-wood.name/more.html
• http://github.com/tbasse/jquery-truncate

Existem também alguns testes de pré-desempenho .

Eu hackeei até conseguir algo próximo disso. Ele vem com algumas ressalvas:

1. Não é CSS puro; você precisa adicionar alguns elementos HTML. No entanto, não é necessário JavaScript.
2. As reticências estão alinhadas à direita na última linha. Isso significa que, se o seu texto não estiver alinhado à direita ou justificado, pode haver um espaço perceptível entre a última palavra visível e as reticências (dependendo do tamanho da primeira palavra oculta).
3. O espaço para as reticências é sempre reservado. Isso significa que, se o texto couber na caixa quase com precisão, pode ser desnecessariamente truncado (a última palavra está oculta, embora tecnicamente não seja necessário).
4. Seu texto precisa ter uma cor de plano de fundo fixa, pois estamos usando retângulos coloridos para ocultar as reticências nos casos em que não são necessárias.

Devo também observar que o texto será quebrado em um limite de palavras, não em caracteres. Isso foi deliberado (já que considero melhor para textos mais longos), mas como é diferente do que text-overflow: ellipsispensei, eu deveria mencionar.

Se você pode conviver com essas advertências, o HTML fica assim:

<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>

E esse é o CSS correspondente, usando o exemplo de uma caixa de 150 pixels de largura com três linhas de texto em um fundo branco. Pressupõe que você tenha uma redefinição de CSS ou similar que defina margens e preenchimentos para zero, quando necessário.

/* 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 */
}

O resultado fica assim:

Para esclarecer como funciona, aqui está a mesma imagem, exceto que .hidedots1é destacada em vermelho e .hidedots2em ciano. Estes são os retângulos que ocultam as reticências quando não há texto invisível:

Testado no IE9, IE8 (emulado), Chrome, Firefox, Safari e Opera. Não funciona no IE7.

Aqui está um artigo recente do CSS-Tricks que discute isso.

Algumas das soluções no artigo acima (que não são mencionadas aqui) são

1) -webkit-line-clampe 2) Coloque um elemento absolutamente posicionado no canto inferior direito com desbotamento

Ambos os métodos assumem a seguinte marcação:

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

com css

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

1) -webkit-line-clamp

grampo de linha FIDDLE (..para um máximo de 3 linhas)

.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) desaparecer

Digamos que você defina a altura da linha como 1.2em. Se queremos expor três linhas de texto, podemos apenas fazer a altura do contêiner 3.6em (1.2em × 3). O estouro oculto ocultará o resto.

Fade out FIDDLE

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%);
}

Solução # 3 - Uma combinação usando @supports

Podemos usar o @supports para aplicar o grampo de linha do webkit nos navegadores da webkit e aplicar o desbotamento em outros navegadores.

@supports braçadeira de linha com violino de desvanecimento de fallback

<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;
    }
}

O link abaixo fornece uma solução HTML / CSS pura para esse problema.

Suporte ao navegador - conforme declarado no artigo:

Até agora, testamos o Safari 5.0, IE 9 (deve estar no modo padrão), Opera 12 e Firefox 15.

Navegadores mais antigos ainda funcionarão muito bem, pois a carne do layout está nas propriedades normais de posicionamento, margem e preenchimento. se sua plataforma for mais antiga (por exemplo, Firefox 3.6, IE 8), você poderá usar o método, mas refazer o gradiente como uma imagem PNG autônoma ou filtro DirectX.

http://www.mobify.com/dev/multiline-ellipsis-in-pure-css

o css:

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); }

o html:

<div class="ellipsis">
    <div>
        <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>

o violino

(redimensionar a janela do navegador para teste)

Depois de examinar as especificações do W3 para excesso de texto , não acho que isso seja possível usando apenas CSS. A elipse é uma propriedade nova, por isso provavelmente ainda não recebeu muito uso ou feedback até o momento.

No entanto, esse cara parece ter feito uma pergunta semelhante (ou idêntica) e alguém conseguiu encontrar uma boa solução jQuery. Você pode demonstrar a solução aqui: http://jsfiddle.net/MPkSF/

Se o javascript não for uma opção, acho que você pode estar sem sorte ...

Só quero adicionar a esta pergunta por uma questão de integridade.

• O Opera possui suporte não padrão para essa chamada -o-elipse-lastline .
• dotdotdot é um ótimo plugin jQuery que posso recomendar.

Ótima pergunta ... Eu gostaria que houvesse uma resposta, mas este é o mais próximo que você pode obter com CSS atualmente. Sem reticências, mas ainda bastante utilizável.

overflow: hidden;
line-height: 1.2em;
height: 3.6em;      // 3 lines * line-height

Eu encontrei esta solução css (scss) que funciona muito bem. Nos navegadores Webkit, ele mostra as reticências e, em outros navegadores, apenas trunca o texto. O que é bom para o uso pretendido.

$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 3;

h2 {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
  margin: 0 auto;
  font-size: $font-size;
  line-height: $line-height;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Um exemplo do criador: http://codepen.io/martinwolf/pen/qlFdp

Aqui está a solução mais próxima que eu poderia obter usando apenas css.

HTML

<div class="ellipsis"> <span>...</span>
Hello this is Mr_Green from Stackoverflow. I love CSS. I live in CSS and I will never leave working on CSS even my work is on other technologies.</div>

CSS

div {
    height: 3em;
    line-height: 1.5em;
    width: 80%;
    border: 1px solid green;
    overflow: hidden;
    position: relative;
}
div:after {
    content:". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
    background-color: white;
    color: white;
    display: inline;
    position: relative;
    box-shadow: 8px 1px 1px white;
    z-index: 1;
}
span {
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: white;
}

Working Fiddle ( redimensione a janela para verificar )

Link para o meu blog para explicação

Updated Fiddle

Espero que agora algum especialista em CSS tenha tido uma idéia de como torná-lo perfeito. :)

Há muitas respostas aqui, mas eu precisava de uma que fosse:

• Somente CSS
• À prova de futuro (fica mais compatível com o tempo)
• Não vai separar as palavras (apenas quebra nos espaços)

A ressalva é que ele não fornece reticências para os navegadores que não suportam a -webkit-line-clampregra (atualmente IE, Edge, Firefox), mas usa um gradiente para diminuir o texto.

.clampMe {
  position: relative;
  height: 2.4em; 
  overflow: hidden;
}

.clampMe:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 1.2em; /* Just use multiples of the line-height */
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%);
}

/* Now add in code for the browsers that support -webkit-line-clamp and overwrite the non-supportive stuff */
@supports (-webkit-line-clamp: 2) {
  .clampMe {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
  }
  
  .clampMe:after {
    display: none;
  }
}

<p class="clampMe">There's a lot more text in here than what you'll ever see. Pellentesque habitant testalotish 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>

Você pode vê-lo em ação neste CodePen e também pode ver uma versão Javascript aqui (sem jQuery).

Um pouco atrasado para esta festa, mas eu pensei em uma solução única. Em vez de tentar inserir suas próprias reticências através de truques de css ou js, pensei em tentar rolar com a única restrição de linha única. Portanto, duplico o texto para cada "linha" e apenas uso um recuo de texto negativo para garantir que uma linha comece onde a última pára. FIDDLE

CSS:

#wrapper{
    font-size: 20pt;
    line-height: 22pt;
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.text-block-line{
    height: 22pt;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    width: auto;
}
.text-block-line:last-child{
    text-overflow: ellipsis;
}

/*the follwing is suboptimal but neccesary I think. I'd probably just make a sass mixin that I can feed a max number of lines to and have them avialable. Number of lines will need to be controlled by server or client template which is no worse than doing a character count clip server side now. */
.line2{
    text-indent: -100%;
}
.line3{
    text-indent: -200%;
}
.line4{
    text-indent: -300%;
}

HTML:

<p id="wrapper" class="redraw">
    <span class="text-block-line line1">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line2">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line3">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line4">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
</p>

Mais detalhes no violino. Há um problema no navegador que reflete o uso de um redesenho de JS e, portanto, verifique-o, mas esse é o conceito básico. Quaisquer pensamentos / sugestões são muito apreciados.

obrigado @balpha e @Kevin, eu combino dois métodos.

nenhum js é necessário neste método.

você pode usar background-imagee nenhum gradiente é necessário para ocultar pontos.

o innerHTMLde .ellipsis-placeholdernão é necessário, eu uso .ellipsis-placeholderpara manter a mesma largura e altura com .ellipsis-more. Você poderia usar em seu display: inline-blocklugar.

.ellipsis {
    overflow: hidden;
    position: relative;
}
.ellipsis-more-top {/*push down .ellipsis-more*/
    content: "";
    float: left;
    width: 5px;
}
.ellipsis-text-container {
    float: right;
    width: 100%;
    margin-left: -5px;
}
.ellipsis-more-container {
    float: right;
    position: relative;
    left: 100%;
    width: 5px;
    margin-left: -5px;
    border-right: solid 5px transparent;
    white-space: nowrap;
}
.ellipsis-placeholder {/*keep text around ,keep it transparent ,keep same width and height as .ellipsis-more*/
    float: right;
    clear: right;
    color: transparent;
}
.ellipsis-placeholder-top {/*push down .ellipsis-placeholder*/
    float: right;
    width: 0;
}
.ellipsis-more {/*ellipsis things here*/
    float: right;
}
.ellipsis-height {/*the total height*/
    height: 3.6em;
}
.ellipsis-line-height {/*the line-height*/
    line-height: 1.2;
}
.ellipsis-margin-top {/*one line height*/
    margin-top: -1.2em;
}
.ellipsis-text {
    word-break: break-all;
}

<div class="ellipsis ellipsis-height ellipsis-line-height">
    <div class="ellipsis-more-top ellipsis-height"></div>
    <div class="ellipsis-text-container">
        <div class="ellipsis-placeholder-top ellipsis-height ellipsis-margin-top"></div>
        <div class="ellipsis-placeholder">
           <span>...</span><span>more</span>
        </div>
        <span class="ellipsis-text">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </span>
    </div>
    <div class="ellipsis-more-container ellipsis-margin-top">
        <div class="ellipsis-more">
            <span>...</span><span>more</span>
        </div>
    </div>
</div>

jsfiddler

solução javascript será melhor

• obter o número de linhas do texto
• alternar is-ellipsisclasse se a janela redimensionar ou mudar de elemento

getRowRects

Element.getClientRects()funciona como este

cada rects na mesma linha tem o mesmo topvalor, portanto, descubra os rects com topvalores diferentes , como este

function getRowRects(element) {
    var rects = [],
        clientRects = element.getClientRects(),
        len = clientRects.length,
        clientRect, top, rectsLen, rect, i;

    for(i=0; i<len; i++) {
        has = false;
        rectsLen = rects.length;
        clientRect = clientRects[i];
        top = clientRect.top;
        while(rectsLen--) {
            rect = rects[rectsLen];
            if (rect.top == top) {
                has = true;
                break;
            }
        }
        if(has) {
            rect.right = rect.right > clientRect.right ? rect.right : clientRect.right;
            rect.width = rect.right - rect.left;
        }
        else {
            rects.push({
                top: clientRect.top,
                right: clientRect.right,
                bottom: clientRect.bottom,
                left: clientRect.left,
                width: clientRect.width,
                height: clientRect.height
            });
        }
    }
    return rects;
}

flutuador ...more

como este

detectar redimensionamento da janela ou elemento alterado

como este

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical; 

veja mais clique aqui

uma base pura de método css no -webkit-line-clamp:

@-webkit-keyframes ellipsis {/*for test*/
    0% { width: 622px }
    50% { width: 311px }
    100% { width: 622px }
}
.ellipsis {
    max-height: 40px;/* h*n */
    overflow: hidden;
    background: #eee;

    -webkit-animation: ellipsis ease 5s infinite;/*for test*/
    /**
    overflow: visible;
    /**/
}
.ellipsis .content {
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    font-size: 50px;/* w */
    line-height: 20px;/* line-height h */
    color: transparent;
    -webkit-line-clamp: 2;/* max row number n */
    vertical-align: top;
}
.ellipsis .text {
    display: inline;
    vertical-align: top;
    font-size: 14px;
    color: #000;
}
.ellipsis .overlay {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /**
    overflow: visible;
    left: 0;
    background: rgba(0,0,0,.5);
    /**/
}
.ellipsis .overlay:before {
    content: "";
    display: block;
    float: left;
    width: 50%;
    height: 100%;

    /**
    background: lightgreen;
    /**/
}
.ellipsis .placeholder {
    float: left;
    width: 50%;
    height: 40px;/* h*n */

    /**
    background: lightblue;
    /**/
}
.ellipsis .more {
    position: relative;
    top: -20px;/* -h */
    left: -50px;/* -w */
    float: left;
    color: #000;
    width: 50px;/* width of the .more w */
    height: 20px;/* h */
    font-size: 14px;

    /**
    top: 0;
    left: 0;
    background: orange;
    /**/
}

<div class='ellipsis'>
    <div class='content'>
        <div class='text'>text text text text text text text text text text text text text text text text text text text text text </div>
        <div class='overlay'>
            <div class='placeholder'></div>
            <div class='more'>...more</div>
        </div>
    </div>
</div>

Encontrei um truque de javascript, mas você precisa usar o comprimento da string. Digamos que você queira 3 linhas de largura de 250 px, você pode calcular o comprimento por linha, ou seja

//get the total character length.
//Haha this might vary if you have a text with lots of "i" vs "w"
var totalLength = (width / yourFontSize) * yourNumberOfLines

//then ellipsify
function shorten(text, totalLength) {
    var ret = text;
    if (ret.length > totalLength) {
        ret = ret.substr(0, totalLength-3) + "...";
    }
    return ret;
}