Com CSS, use “…” para o bloco transbordado de várias linhas


303

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. */
+--------------------+

3
Se estas são linhas separadas, você realmente só precisa se preocupar em executar uma linha e repetir a funcionalidade de cada linha. Se todas essas linhas pertencerem à mesma frase, você provavelmente deve manter as reticências apenas na última linha. Se você usar uma elipse no meio de uma frase, estará essencialmente fazendo um buraco nela.
Wex


4
um bom artigo sobre este assunto css-tricks.com/line-clampin
Adrien Seja

Consulte o seguinte link para minha resposta: stackoverflow.com/questions/536814/…
Shishir Arora

Eu respondi isso em muito bons detalhes com uma solução CSS pura aqui . Funciona de forma confiável. Conforme mencionado nessa resposta, isso é muito mais fácil de obter com Javascript, mas se estiver fora de questão, isso funcionará .
Dashard #

Respostas:


84

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:

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


57
Eu não vi nenhuma solução CSS puro para esse requisito
Jim Thomas

@Ovilia nota que a solução da Jim também inclui um plugin jQuery chamados jquery.autoellipsis.js, você vai ter que baixar um include que separadamente
Jeff

7
css várias linhas elipsis tutorial: mobify.com/dev/multiline-ellipsis-in-pure-css
Julien

2
Queridas pessoas do futuro: este plugin é o meu favorito, pois permite alternar a exibição do texto oculto. http://keith-wood.name/more.html
brichins

1
Todas as bibliotecas adicionadas são boas. Os testes de desempenho podem ajudá-lo a decidir, mas eu gostaria de mencionar que geralmente estamos implementando o dotdotdot devido à sua ampla variedade de configurações e códigos limpos - fáceis de modificar. (Observe, este é apenas um ponto de vista pessoal - que não pertence à resposta.) #
10251 Milan Jaros

58

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:

imagem do resultado renderizado com diferentes comprimentos de texto

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:

a mesma imagem acima, exceto que os elementos auxiliares são destacados em cores

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


9
Você realmente não precisa os 4 elementos html, desde your texté envolvido com <p>tags (como deveriam ser), então você pode usar .ellipsify p:beforee .ellipsify p:after, em seguida, é claro que você precisa .ellipsify p:before{content:"\2026";}o \2026é o código para a elipse, também, pode precisar content:" ";como eles podem não funcionar para os elementos vazios.
Val

2
Embora eu não ache que essa resposta seja adequada a muitas situações, pelo menos uma resposta que não seja de plug-in e JavaScript é fornecida. Isso e a engenhosidade que foram incorporadas na construção desta resposta são o motivo de eu +1a estar usando.
VoidKing

@MichalStefanow Apenas um - para o qual eu o criei: As descrições nos "cards" do aplicativo no Apptivate.MS, por exemplo, consulte apptivate.ms/users/1141291/blynn .
balpha

@ Pavlo, eu realmente gosto da sua solução. Mas parece funcionar apenas com o texto padrão fornecido, não se eu carregar texto de um banco de dados, porque o script não conhece a altura externa do texto carregado?
precisa saber é o seguinte

2
@SchweizerSchoggi, pseudoelementos ou não, esta solução não depende de JS. Não importa de onde você obtém o texto, se o implementar corretamente.
Pavlo

41

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

@ HP's411 no Firefox, você verá um efeito de fade em vez de uma elipse
DanielD

34

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)


2
"Até agora testamos ..." tudo, menos o Chrome?
stevenspiel

Teste passadoChrome for Mac Version 48.0.2564.116
Adrien Seja

21

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


3
New-ish? O MSIE o apoia desde o IE6. Hoje, todos os navegadores suportam, exceto o Firefox .
Christian

Eu chamaria qualquer propriedade CSS3 que não seja implementada globalmente "new-ish". É apenas uma questão de semântica. Além disso, você percebe que está comentando uma postagem com quase um ano de idade?
21412 Jeff

5
Não é CSS3, existe há séculos e é amplamente adotado. Somente a especificação pode ser considerada nova. Além disso, se o SO não quisesse comentários sobre tópicos antigos, ele poderia ter desativado.
Christian

10

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.

Parece que -o-ellipsis-lastlinepode ter sido removido quando o Opera mudou para o WebKit. Deixando bala para fins históricos.
Matt

8

Ó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

na verdade, a resposta de Kevin é o mais próximo que você pode começar com CSS estes dias stackoverflow.com/a/14248844/759452
Adrien Seja

7

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


-webkit-line-clampsuporte ao navegador caniuse.com/#search=-webkit-line-clamp
Adrien Seja

6

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


Essa resposta está me dando dor de estômago. Primeiro de tudo, você não usa reticências tipograficamente disponíveis ... (é um símbolo de fonte que ocupa um espaço). Compare smashingmagazine.com/2008/08/11/top-ten-web-typography-sins E com a sua solução, você não pode realmente controlar onde as reticências ficam, para que possam chegar a situações indesejáveis, como pontos seguidos .
Volker E.

1
@VolkerE. Obrigado pela informação. Aqui está o violino atualizado . informe-me se estiver faltando algum ponto em sua explicação.
precisa saber é o seguinte

Ótima solução (a original), mas por que não usar em div::beforevez disso span? :)
Adam

@ Adam, houve algum caso de borda, então não usei pseudo-elemento. ( Não me lembro agora )
Mr_Green

5

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


4

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.


1
Não gosto de duplicar todas as linhas de texto. Além disso - e se o texto for dinâmico - você não saberá quantas linhas adicionar. Dito isto, +1 para esta solução exclusiva!
Danield

Obrigado pela entrada :) Texto dinâmico não é um problema. É basicamente definir a altura máxima do contêiner no modelo. Se você deseja limitar a 3 linhas, faça 3. Meu caso de uso tem um título que pode ser de 1-2 linhas e um trecho que pode ser de 1-3. Esses são valores conhecidos. Não importa quanto tempo a string é. Além disso, se você fizer isso em uma situação de modelo e não em html estático, poderá lidar com o recuo de texto negativo com um estilo embutido, para que você não precise desse grande bloco de linha1, linha2, linha3, etc. um violino usando o modelo js como exemplo.
lupos

Seria útil se a quebra de palavras não fosse um problema no projeto.
Mr_Green

3

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


2

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

insira a descrição da imagem aqui

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

insira a descrição da imagem aqui

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

insira a descrição da imagem aqui

detectar redimensionamento da janela ou elemento alterado

como este

insira a descrição da imagem aqui

insira a descrição da imagem aqui

insira a descrição da imagem aqui



0

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>


-1

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

Provavelmente, não usamos fontes de largura fixa em todos os lugares. Portanto, esse truque pode falhar nessas situações.
Ovilia 18/08/14
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.