CSS text-desbordamiento - aplicar puntos suspensivos si el texto se extiende (n) ésima

Question

estoy usando el siguiente código de texto para evitar que se desborde a una nueva línea:

.info-box{ 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
    height: 3em; 
    width: 300px; 
    font-size: 1em; 
    line-height: 1em; 
} 

Esto funciona, como se esperaba, pero hay espacio para tres líneas en esta caja. ¿Cómo puedo ordenar a los navegadores que apliquen elipsis si el texto se extiende más allá de la tercera línea? ¿O el desbordamiento de texto solo funciona en uno?

Los problemas no me molestarán si necesito JS para esto.

Answer 1

Puede falsificarlo con CSS de esta manera.

Agregue <span>...</span> al principio de div.

<div class="info-box"><span>...</span>Lorem ipsum dolar etc.</div> 

En tu CSS

1. deshacerse del nowrap y text-overflow

2. añadir alguna posición padding-right

3. la span por la parte inferior derecha.

CSS

.info-box{ 
    overflow:hidden; 
    height: 3em; 
    width: 300px; 
    font-size: 1em; 
    line-height: 1em; 
    padding-right:20px; 
} 

.info-box span{ 
    position:relative; 
    top:31px; 
    left:297px; 
    display:inline-block; 
} 

Ejemplo de trabajo:http://jsfiddle.net/jasongennaro/UeCsk/

FYI ... habrá un pequeño espacio en la parte superior izquierda, donde los puntos suspensivos se supone que ser (porque estamos usando position:relative;.

fyi 2 ... esto debería funcionar con la cantidad de líneas que desee (mencionó tres en la pregunta) siempre que ajuste top y left.

Answer 2

Sé que esta es una vieja pregunta, pero encontré esta solución y funciona bien para mí.

https://codepen.io/martinwolf/pen/qlFdp

@import "compass/css3"; 

/* Martin Wolf CodePen Standard */ 

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700); 

* { 
    margin: 0; 
    padding: 0; 
    @include box-sizing(border-box); 
} 

body { 
    padding: 3em 2em; 
    font-family: 'Open Sans', Arial, sans-serif; 
    color: #cf6824; 
    background: #f7f5eb; 
} 

/* END Martin Wolf CodePen Standard */ 


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