puntos suspensivos css en segunda línea

CSS text-overflow: ellipsisen la segunda línea, ¿es esto posible? No puedo encontrarlo en la red.

ejemplo:

lo que quiero es así:

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

pero lo que pasa es esto:

I hope someone could help me. I ... 

Un requisito para text-overflow: ellipsis;trabajar es una versión de una línea de white-space( pre, nowrapetc.). Lo que significa que el texto nunca llegará a la segunda línea.

Es decir. No es posible en CSS puro.

Mi fuente cuando estaba buscando exactamente lo mismo en este momento: http://www.quirksmode.org/css/textoverflow.html (¡Quirksmode ftw!)

EDITAR Si los buenos dioses CSS implementarán http://www.w3.org/TR/css-overflow-3/#max-lines podemos hacer esto en CSS puro usando fragments(new) y max-lines(new). También más información en http://css-tricks.com/line-clampin/

EDIT 2 WebKit / Blink tiene line-clamp: -webkit-line-clamp: 2pondrá puntos suspensivos en la segunda línea.

Esto debería funcionar en los navegadores webkit :

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

Como otros ya han respondido, no existe una solución CSS pura. Hay un complemento jQuery que es muy fácil de usar, se llama dotdotdot . Utiliza el ancho y la altura del contenedor para calcular si necesita truncar y agregar puntos suspensivos.

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

Aquí hay un jsFiddle .

Descubrí que la respuesta de Skeep no era suficiente y también necesitaba un overflowestilo:

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

Si alguien está usando SASS / SCSS y se topa con esta pregunta, tal vez esta combinación podría ser de ayuda:

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

esto solo agrega puntos suspensivos en los navegadores webkit. el descanso simplemente lo corta.

Solo use line-clamp para los navegadores que lo admiten (la mayoría de los navegadores modernos) y retroceda a 1 línea para los más antiguos.

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

¡Qué pena que no puedas hacer que funcione en dos líneas! ¡Sería increíble si el elemento fuera bloque de visualización y tuviera una altura establecida en 2em o algo así, y cuando el texto se desbordara mostraría una elipsis!

Para un solo revestimiento puede usar:

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

Para varias líneas, tal vez podría usar un Polyfill como jQuery autoellipsis que está en github http://pvdspek.github.com/jquery.autoellipsis/

No soy un profesional de JS, pero descubrí un par de formas en que podrías hacer esto.

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

Luego, con jQuery lo trunca a un recuento de caracteres específico, pero deja la última palabra así:

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

El resultado se ve así:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
elementum consequat tortor et ...

O simplemente puede truncarlo a un recuento de caracteres específico como este:

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

El resultado se ve así:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
elementum consequat tortor et euismod ...

Espero que esto ayude un poco.

Aquí está el jsFiddle .

Aquí hay un buen ejemplo en 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>

He usado el jQuery-condense-plugin antes, que parece que puede hacer lo que quieras. Si no, hay diferentes complementos que pueden satisfacer sus necesidades.

Editar: le hice una demostración , tenga en cuenta que vinculé jquery.condense.js en la demostración que hace la magia, por lo que le doy todo el crédito al autor de ese complemento :)

Es un CSS no estándar, que no está cubierto en la versión actual de CSS (Firefox no lo admite). Intenta usar JavaScript en su lugar.

Manera css pura de recortar texto multilínea con puntos suspensivos

Ajuste la altura del contenedor de texto, línea de control para romper por -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;
}

He encontrado este problema antes, y no existe una solución CSS pura

Es por eso que he desarrollado una pequeña biblioteca para tratar este problema (entre otros). La biblioteca proporciona objetos para modelar y realizar la representación de texto a nivel de letra. Por ejemplo, puede emular un desbordamiento de texto: puntos suspensivos con un límite arbitrario (no es necesario una línea)

Lea más en http://www.samuelrossille.com/home/jstext.html para captura de pantalla, tutorial y enlace de descarga.

Si alguien está tratando de hacer que la pinza de línea funcione en flexbox , es un poco más complicado, especialmente una vez que está realizando pruebas de tortura con palabras realmente largas. Las únicas diferencias reales en este fragmento de código están min-width: 0;en el elemento flexible que contiene texto truncado, y word-wrap: break-word;. Una sugerencia para https://css-tricks.com/flexbox-truncated-text/ para obtener información. Descargo de responsabilidad: esto sigue siendo webkit solo hasta donde yo sé.

.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 (versión codepen)

Todas las respuestas aquí son incorrectas, faltan piezas importantes, la 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>

Una base de método CSS pura en -webkit-line-clamp, que funciona en 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>

No hay una manera fácil de hacer esto. Use la biblioteca Clamp.js .

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

Encontré una solución, sin embargo, necesita saber una longitud aproximada de caracteres que se ajuste a su área de texto, luego unir ... al espacio anterior.

La forma en que hice esto es:

1. suponga una longitud aproximada de caracteres (en este caso 200) y pase a una función junto con su texto
2. divide los espacios para que tengas una cadena larga
3. use jQuery para cortar el primer "" espacio después de la longitud de su personaje
4. únete al resto ...

codigo:

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

Aquí hay un violín: http://jsfiddle.net/GYsW6/1/