Al fin logré lo que quería. No tuve que usar javascript, solo CSS.
De esta forma pude lograr una solución portable para cualquier entorno e increiblemente segun el spec puede funcionar hasta en Internet Explorer 6.
Resulta que la propiedad white-space
cuando se pone en pre
si preserva los saltos de línea, incluso tiene en cuenta cuando se encuentra con un elemento <br/>
pero crea este efecto curioso.
$(function() {
var textoLargo = 'Lorem ipsum dolor amet ipsum dolor amet ipsum dolor amet ipsum dolor amet\r\n' +
'ipsum dolor\r\n' +
'amet Lorem ipsum dolor amet Lorem ipsum\n' +
'dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet\r' +
'Lorem ipsum dolor amet Lorem ipsum dolor amet\n';
$('#empty').html(textoLargo);
});
.line-container {
width: 200px;
height: 20px;
}
.single-line {
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: pre;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Probando distintos separadores</h3>
<div class="line-container">
<div id="empty" class="single-line">
</div>
</div>
<h3 style="margin-top: 100px">Usando elementos br como separadores</h3>
<div class="line-container">
<div class="single-line">Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet
<br/>Lorem ipsum
<br/>Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet
<br/>
</div>
</div>
Lo que hace es es crear pequeños fragmentos de texto recortados. La propiedad text-overflow
cuando se pone en ellipsis
recorta el texto que sobrepasa el tamaño de su contenedor, por eso es necesario usar overflow: hidden;
en conjunto con la propiedad white-space
para que se muestre la elípsis ...
en caso que el texto sea más grande.
Llegando ahí solo tuve que aplicarle otro overflow: hidden;
al contenedor y listo!
$(function() {
var textoLargo = 'Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet\r\n' +
'ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor\r\n' +
'amet Lorem ipsum dolor amet Lorem ipsum\n' +
'dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet\r' +
'Lorem ipsum dolor amet Lorem ipsum dolor amet\n';
var primeraLineaCorta = 'Lorem ipsum dolor \r\n' +
'ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor\r\n' +
'amet Lorem ipsum dolor amet Lorem ipsum\n' +
'dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet\r' +
'Lorem ipsum dolor amet Lorem ipsum dolor amet\n';
$('#long').html(textoLargo);
$('#short').html(primeraLineaCorta);
});
.line-container {
width: 200px;
height: 20px;
overflow: hidden;
}
.single-line {
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: pre;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<h3>Probando distintos separadores</h3>
<div class="line-container">
<div id="long" class="single-line">
</div>
</div>
<h3 style="margin-top: 30px">Si el texto es mas pequeño</h3>
<div class="line-container">
<div id="short" class="single-line">
</div>
</div>
<h3 style="margin-top: 30px">Si se usa br como separador</h3>
<div class="line-container">
<div id="short" class="single-line">Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet
<br/>Lorem ipsum
<br/>Lorem ipsum dolor amet Lorem ipsum dolor amet
<br/>Lorem ipsum dolor amet Lorem ipsum dolor amet
<br/>
</div>
</div>
<h3 style="margin-top: 30px">Si se usa br y el texto es pequeño</h3>
<div class="line-container">
<div id="short" class="single-line">Lorem ipsum dolor
<br/>
</div>
</div>
Sólo es necesario usar este pequeño snippet de css para lograrlo
.line-container {
width: 200px;
height: 20px;
overflow: hidden;
}
.single-line {
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: pre;
}
Nota: Según la documentación de la propiedad white-space
esta solución no funciona cuando sólo se usa \r
como separador. Según el articulo de SO eso solo aplica a las Macs más antiguas lo cual creo que es bastante aceptable. Si este es el caso habría que reemplazar los caracteres de retorno \r
por \n
usando javascript para lograr este efecto.
Lorem
y ocultar el resto del texto ya que lo demás pertenece a otra línea; sin embargo lo que se muestra esLorem ipsum dolor amet Lorem i...
ya que los retornos de línea son eliminados.ng-bind
para llenar el div pero imagino que cuando obtenga mis datos de la bd el problema persista. Al darme cuenta de lo que estaba ocurriendo pensé que debía usar una directiva pero el problema es algo trivial así que intenté con CSS y no he logrado que funcione.