reticências css na segunda linha

CSS text-overflow: ellipsis na segunda linha, isso é possível? Não consigo encontrá-lo na rede.

exemplo:

o que eu quero é assim:

I hope someone could help me. I need 
an ellipsis on the second line of...

mas o que está acontecendo é o seguinte:

I hope someone could help me. I ... 

Um requisito para text-overflow: ellipsis;trabalhar é uma versão de uma linha de white-space( pre,nowrap etc). O que significa que o texto nunca alcançará a segunda linha.

Ergo. Não é possível em CSS puro.

Minha fonte quando eu estava procurando exatamente a mesma coisa agora: http://www.quirksmode.org/css/textoverflow.html (Quirksmode ftw!)

EDIT Se os bons deuses do CSS implementarem http://www.w3.org/TR/css-overflow-3/#max-lines , podemos colocar isso em CSS puro usando fragments(novo) e max-lines(novo). Também mais algumas informações em http://css-tricks.com/line-clampin/

EDIT 2 O WebKit / Blink tem line-clamp: -webkit-line-clamp: 2colocará reticências na 2ª linha.

Isso deve funcionar nos navegadores do kit da web :

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

Como outros já responderam, não existe uma solução CSS pura. Existe um plugin jQuery que é muito fácil de usar, chamado de dotdotdot . Ele usa a largura e a altura do contêiner para calcular se ele precisa truncar e adicionar reticências.

$("#multilinedElement").dotdotdot();

Aqui está um jsFiddle .

Descobri que a resposta de Skeep não era suficiente e também precisava de um overflowestilo:

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

se alguém estiver usando SASS / SCSS e se deparar com essa pergunta - talvez esse mixin possa ser útil:

@mixin line-clamp($numLines : 1, $lineHeight: 1.412) {
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  display: block;
  /* autoprefixer: off */
  display: -webkit-box;
  -webkit-line-clamp: $numLines;
  -webkit-box-orient: vertical;
  max-height: $numLines * $lineHeight + unquote('em');
}

isso adiciona apenas as reticências nos navegadores do kit da web. o resto apenas corta.

Basta usar o grampo de linha nos navegadores que o suportam (navegadores mais modernos) e voltar a 1 linha para os mais antigos.

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


    @supports (-webkit-line-clamp: 2) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: initial;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }

Que pena que você não pode fazê-lo funcionar em duas linhas! Seria incrível se o elemento fosse bloco de exibição e tivesse uma altura definida para 2em ou algo assim, e quando o texto estourasse, mostraria uma elipse!

Para um único revestimento, você pode usar:

.show-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Para várias linhas, talvez você possa usar um Polyfill, como a autoellipsis do jQuery, que está no github http://pvdspek.github.com/jquery.autoellipsis/

Eu não sou um profissional de JS, mas descobri algumas maneiras de fazer isso.

O HTML:

<p id="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum consequat tortor et euismod. Nam commodo consequat libero vel lobortis. Morbi ac nisi at leo vehicula consectetur.</p>

Em seguida, com o jQuery, você o trunca para uma contagem de caracteres específica, mas deixa a última palavra como esta:

// Truncate but leave last word
var myTag = $('#truncate').text();
if (myTag.length > 100) {
  var truncated = myTag.trim().substring(0, 100).split(" ").slice(0, -1).join(" ") + "…";
  $('#truncate').text(truncated);
}

O resultado fica assim:

Lorem ipsum dolor sente-se no meio, consectetur elip adipiscing. Morbi
elementum consequat tortor et…

Ou você pode simplesmente truncá-lo para uma contagem de caracteres específica como esta:

// Truncate to specific character
var myTag = $('#truncate').text();
if (myTag.length > 15) {
  var truncated = myTag.trim().substring(0, 100) + "…";
  $('#truncate').text(truncated);
}

O resultado fica assim:

Lorem ipsum dolor sente-se no meio, consectetur elip adipiscing. Morbi
elementum consequat tortor et euismod…

Espero que ajude um pouco.

Aqui está o jsFiddle .

Aqui está um bom exemplo em CSS puro.

.container{
  width: 200px;
}
.block-with-text {
  overflow: hidden;
  position: relative; 
  line-height: 1.2em;
  max-height: 3.6em;
  text-align: justify;  
  margin-right: -1em;
  padding-right: 1em;
}
.block-with-text+.block-with-text{
  margin-top:10px;
}
.block-with-text:before {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
}
.block-with-text:after {
  content: '';
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  background: white;
}

<div class="container">


<div class="block-with-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
</div>

<div class="block-with-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>


<div class="block-with-text">
Lorem Ipsum is simply
</div>

</div>

Eu usei o jQuery-condensar-plugin antes, que parece que pode fazer o que você deseja. Caso contrário, existem plugins diferentes que podem atender às suas necessidades.

Edit: Fiz uma demo para você - observe que eu vinculei o jquery.condense.js na demo que faz a mágica, crédito total ao autor desse plugin :)

É um CSS não padrão, que não é coberto na versão atual do CSS (o Firefox não suporta). Tente usar JavaScript.

Modo CSS puro de aparar texto de múltiplas linhas com reticências

Ajuste a altura e a linha de controle do contêiner de texto para quebrar -webkit-line-clamp: 2;

.block-ellipsis {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  height: 30px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Eu já conheci esse problema antes e não há uma solução css pura

É por isso que desenvolvi uma pequena biblioteca para lidar com esse problema (entre outros). A biblioteca fornece objetos para modelar e executar a renderização de texto no nível da letra. Você pode, por exemplo, emular um excesso de texto: reticências com um limite arbitrário (não é necessária uma linha)

Leia mais em http://www.samuelrossille.com/home/jstext.html para obter uma captura de tela, tutorial e link para transferência.

Se alguém está tentando fazer com que o grampo de linha funcione no flexbox , é um pouco mais complicado - especialmente quando você faz testes de tortura com palavras muito longas. As únicas diferenças reais nesse trecho de código estão min-width: 0;no item flex que contém texto truncado e word-wrap: break-word;. Uma dica para https://css-tricks.com/flexbox-truncated-text/ para obter informações. Isenção de responsabilidade: este ainda é o webkit apenas até onde eu sei.

.flex-parent {
  display: flex;
}

.short-and-fixed {
  width: 30px;
  height: 30px;
  background: lightgreen;
}

.long-and-truncated {
  margin: 0 20px;
  flex: 1;
  min-width: 0;/* Important for long words! */
}

.long-and-truncated span {
  display: inline;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-wrap: break-word;/* Important for long words! */
}

<div class="flex-parent">
  <div class="flex-child short-and-fixed">
  </div>
  <div class="flex-child long-and-truncated">
    <span>asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd</span>
  </div>
  <div class="flex-child short-and-fixed">
  </div>
</div>

http://codepen.io/AlgeoMA/pen/JNvJdx (versão codepen)

Todas as respostas aqui estão erradas, faltam uma peça importante, a altura

.container{
    width:200px;
    height:600px;
    background:red
}
.title {
        overflow: hidden;
        line-height: 20px;
        height: 40px;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
<div class="container">
    <div class="title">this is a long text you cant cut it in half</div>
</div>

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

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

Não é uma maneira realmente fácil de fazer isso. Use a biblioteca Clamp.js .

$clamp(myHeader, {clamp: 3});

Encontrei uma solução, no entanto, você precisa conhecer um tamanho aproximado de caractere que caiba na sua área de texto e, em seguida, junte um ... ao espaço anterior.

A maneira que eu fiz isso é:

1. assuma um tamanho aproximado de caractere (neste caso, 200) e passe para uma função junto com o seu texto
2. divida os espaços para que você tenha uma corda longa
3. use jQuery para obter o primeiro espaço "" após o tamanho do seu caractere
4. junte-se ao restante ...

código:

truncate = function(description){
        return description.split('').slice(0, description.lastIndexOf(" ",200)).join('') + "...";           
}

aqui está um violino - http://jsfiddle.net/GYsW6/1/