suspensivos - Limita la longitud del texto a n líneas usando CSS
puntos suspensivos css varias lineas (11)
Actualmente no puede, pero en el futuro podrá usar text-overflow:ellipis-lastline . Actualmente está disponible con el prefijo de proveedor en Opera 10.60+: example
¿Es posible limitar la longitud del texto a "n" líneas usando CSS (o cortarlo cuando se desborda verticalmente)?
text-overflow: ellipsis; Solo funciona para 1 linea de texto.
texto original:
Ultrices natoque mus mattis, aliquam, se estrella en pellentesque
tincidunt elit purus lectus, vel ut aliquet, elementum nunc
nunc rhoncus placerat urna! Siéntate est sed! Ut Penatibus Turpis
mus tincidunt! Dapibus sed aenean, magna sagittis, lorem velit
Salida deseada (2 lineas):
Ultrices natoque mus mattis, aliquam, se estrella en pellentesque
tincidunt elit purus lectus, vel ut aliquet, elementum ...
Código de ejemplo básico, aprender a codificar es fácil. Compruebe los comentarios de estilo CSS.
table tr {
display: flex;
}
table tr td {
/* start */
display: inline-block; /* <- Prevent <tr> in a display css */
text-overflow: ellipsis;
white-space: nowrap;
/* end */
padding: 10px;
width: 150px; /* Space size limit */
border: 1px solid black;
overflow: hidden;
}
<table>
<tbody>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla egestas erat ut luctus posuere. Praesent et commodo eros. Vestibulum eu nisl vel dui ultrices ultricies vel in tellus.
</td>
<td>
Praesent vitae tempus nulla. Donec vel porta velit. Fusce mattis enim ex. Mauris eu malesuada ante. Aenean id aliquet leo, nec ultricies tortor. Curabitur non mollis elit. Morbi euismod ante sit amet iaculis pharetra. Mauris id ultricies urna. Cras ut
nisi dolor. Curabitur tellus erat, condimentum ac enim non, varius tempor nisi. Donec dapibus justo odio, sed consequat eros feugiat feugiat.
</td>
<td>
Pellentesque mattis consequat ipsum sed sagittis. Pellentesque consectetur vestibulum odio, aliquet auctor ex elementum sed. Suspendisse porta massa nisl, quis molestie libero auctor varius. Ut erat nibh, fringilla sed ligula ut, iaculis interdum sapien.
Ut dictum massa mi, sit amet interdum mi bibendum nec.
</td>
</tr>
<tr>
<td>
Sed viverra massa laoreet urna dictum, et fringilla dui molestie. Duis porta, ligula ut venenatis pretium, sapien tellus blandit felis, non lobortis orci erat sed justo. Vivamus hendrerit, quam at iaculis vehicula, nibh nisi fermentum augue, at sagittis
nibh dui et erat.
</td>
<td>
Nullam mollis nulla justo, nec tincidunt urna suscipit non. Donec malesuada dolor non dolor interdum, id ultrices neque egestas. Integer ac ante sed magna gravida dapibus sit amet eu diam. Etiam dignissim est sit amet libero dapibus, in consequat est
aliquet.
</td>
<td>
Vestibulum mollis, dui eu eleifend tincidunt, erat eros tempor nibh, non finibus quam ante nec felis. Fusce egestas, orci in volutpat imperdiet, risus velit convallis sapien, sodales lobortis risus lectus id leo. Nunc vel diam vel nunc congue finibus.
Vestibulum turpis tortor, pharetra sed ipsum eu, tincidunt imperdiet lorem. Donec rutrum purus at tincidunt sagittis. Quisque nec hendrerit justo.
</td>
</tr>
</tbody>
</table>
Hay una forma, pero es solo para webkit. Sin embargo, cuando combinas esto con line-height: X; y max-height: X*N; , también funcionará en otros navegadores, solo sin elipsis.
.giveMeEllipsis {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: N; /* number of lines to show */
line-height: X; /* fallback */
max-height: X*N; /* fallback */
}
Demostración: http://jsfiddle.net/csYjC/1131/
He estado buscando esto por todas partes, pero luego me doy cuenta de que, ¡¡¡mi sitio web usa php !!! ¿Por qué no utilizar la función de recorte en la entrada de texto y jugar con la longitud máxima ....
Aquí también hay una posible solución para aquellos que usan php: http://ideone.com/PsTaI
<?php
$s = "In the beginning there was a tree.";
$max_length = 10;
if (strlen($s) > $max_length)
{
$offset = ($max_length - 3) - strlen($s);
$s = substr($s, 0, strrpos($s, '' '', $offset)) . ''...'';
}
echo $s;
?>
La siguiente clase de CSS me ayudó a obtener puntos suspensivos de dos líneas.
.two-line-ellipsis {
padding-left:2vw;
text-overflow: ellipsis;
overflow: hidden;
width: 325px;
line-height: 25px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
padding-top: 15px;
}
Lo que puedes hacer es lo siguiente:
.max-lines {
display: block; /* or inline-block */
text-overflow: ellipsis;
word-wrap: break-word;
overflow: hidden;
max-height: 3.6em;
line-height: 1.8em;
}
donde max-height: = line-height: × <number-of-lines> en em .
Por lo que puedo ver, esto sería posible solo usando height: (some em value); overflow: hidden height: (some em value); overflow: hidden e incluso entonces no tendría la fantasía ... al final.
Si esa no es una opción, creo que es imposible sin un preprocesamiento del lado del servidor (difícil porque el flujo de texto es imposible de predecir de forma confiable) o jQuery (posible pero probablemente complicado).
Realmente me gusta la línea-abrazadera, pero aún no hay soporte para Firefox ... así que voy con un cálculo matemático y solo oculto el desbordamiento
.body-content.body-overflow-hidden h5 {
max-height: 62px;/* font-size * line-height * lines-to-show(4 in this case) 63px if you go with jquery */
overflow: hidden;
}
.body-content h5 {
font-size: 14px; /* need to know this*/
line-height:1,1; /*and this*/
}
ahora digamos que desea eliminar y agregar esta clase a través de jQuery con un enlace, necesitará tener un píxel adicional para que la altura máxima sea de 63 px, esto se debe a que debe comprobar cada vez si la altura es mayor que 62px, pero en el caso de 4 líneas obtendrá un falso verdadero, por lo que un píxel adicional solucionará esto y no creará ningún problema adicional
pegaré un coffeescript para esto solo para ser un ejemplo, utiliza un par de enlaces que están ocultos por defecto, con clases de lectura más y menos, eliminará los que el desbordamiento no es necesario y eliminará el cuerpo clases de desbordamiento
jQuery ->
$(''.read-more'').each ->
if $(this).parent().find("h5").height() < 63
$(this).parent().removeClass("body-overflow-hidden").find(".read-less").remove()
$(this).remove()
else
$(this).show()
$(''.read-more'').click (event) ->
event.preventDefault()
$(this).parent().removeClass("body-overflow-hidden")
$(this).hide()
$(this).parent().find(''.read-less'').show()
$(''.read-less'').click (event) ->
event.preventDefault()
$(this).parent().addClass("body-overflow-hidden")
$(this).hide()
$(this).parent().find(''.read-more'').show()
Tengo una solución que funciona bien, pero en lugar de unlipsis utiliza un degradado. Funciona cuando tienes texto dinámico, por lo que no sabes si será lo suficientemente largo como para necesitar una elipse. Las ventajas son que no tiene que hacer ningún cálculo de JavaScript y funciona para contenedores de ancho variable que incluyen celdas de tabla y es de navegador cruzado. Utiliza un par de divs adicionales, pero es muy fácil de implementar.
Margen:
<td>
<div class="fade-container" title="content goes here">
content goes here
<div class="fade">
</div>
</td>
CSS:
.fade-container { /*two lines*/
overflow: hidden;
position: relative;
line-height: 18px;
/* height must be a multiple of line-height for how many rows you want to show (height = line-height x rows) */
height: 36px;
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
word-wrap: break-word;
}
.fade {
position: absolute;
top: 50%;/* only cover the last line. If this wrapped to 3 lines it would be 33% or the height of one line */
right: 0;
bottom: 0;
width: 26px;
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}
entrada de blog: http://salzerdesign.com/blog/?p=453
Página de ejemplo: http://salzerdesign.com/test/fade.html
Solución de trabajo en varios navegadores
Este problema nos ha estado molestando a todos por años ...
Para ayudar en todos los casos, he establecido el enfoque único de CSS y un enfoque de jQuery en caso de que las advertencias de CSS sean un problema.
Aquí hay una solución solo para CSS que se me ocurrió que funciona en todas las circunstancias, con algunas advertencias menores.
Los conceptos básicos son simples, ocultan el desbordamiento del tramo y establecen la altura máxima según la altura de la línea como lo sugiere Eugene Xa.
Luego hay una pseudo clase después del div que contiene que coloca los puntos suspensivos muy bien.
Advertencias
Esta solución siempre colocará los puntos suspensivos, independientemente de si es necesario.
Si la última línea termina con una oración final, terminarás con cuatro puntos ...
Deberá estar contento con la alineación del texto justificado.
Los puntos suspensivos estarán a la derecha del texto, que puede parecer descuidado.
Code + Snippet
.text {
position: relative;
font-size: 14px;
color: black;
width: 250px; /* Could be anything you like. */
}
.text-concat {
position: relative;
display: inline-block;
word-wrap: break-word;
overflow: hidden;
max-height: 3.6em; /* (Number of lines you want visible) * (line-height) */
line-height: 1.2em;
text-align:justify;
}
.text.ellipsis::after {
content: "...";
position: absolute;
right: -12px;
bottom: 4px;
}
/* Right and bottom for the psudo class are px based on various factors, font-size etc... Tweak for your own needs. */
<div class="text ellipsis">
<span class="text-concat">
Lorem ipsum dolor sit amet, nibh eleifend cu his, porro fugit mandamus no mea. Sit tale facete voluptatum ea, ad sumo altera scripta per, eius ullum feugait id duo. At nominavi pericula persecuti ius, sea at sonet tincidunt, cu posse facilisis eos. Aliquid philosophia contentiones id eos, per cu atqui option disputationi, no vis nobis vidisse. Eu has mentitum conclusionemque, primis deterruisset est in.
Virtute feugait ei vim. Commune honestatis accommodare pri ex. Ut est civibus accusam, pro principes conceptam ei, et duo case veniam. Partiendo concludaturque at duo. Ei eirmod verear consequuntur pri. Esse malis facilisis ex vix, cu hinc suavitate scriptorem pri.
</span>
</div>
Enfoque jQuery
En mi opinión, esta es la mejor solución, pero no todos pueden usar JS. Básicamente, jQuery verificará cualquier elemento .text, y si hay más caracteres que la var. Máxima predeterminada, cortará el resto y agregará puntos suspensivos.
No hay advertencias sobre este enfoque, sin embargo, este ejemplo de código está destinado solo a demostrar la idea básica; no usaría esto en producción sin mejorarlo por dos razones:
1) Reescribirá el html interno de .text elems. Si es necesario o no. 2) No hace ninguna prueba para verificar que el html interno no tiene elementos anidados, por lo que está confiando mucho en el autor para usar el .text correctamente.
Editado
Gracias por la captura @markzzz
Fragmento de código
setTimeout(function()
{
var max = 200;
var tot, str;
$(''.text'').each(function() {
str = String($(this).html());
tot = str.length;
str = (tot <= max)
? str
: str.substring(0,(max + 1))+"...";
$(this).html(str);
});
},500); // Delayed for example only.
.text {
position: relative;
font-size: 14px;
color: black;
font-family: sans-serif;
width: 250px; /* Could be anything you like. */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="text">
Old men tend to forget what thought was like in their youth; they forget the quickness of the mental jump, the daring of the youthful intuition, the agility of the fresh insight. They become accustomed to the more plodding varieties of reason, and because this is more than made up by the accumulation of experience, old men think themselves wiser than the young.
</p>
<p class="text">
Old men tend to forget what thought was like in their youth;
</p>
<!-- Working Cross-browser Solution
This is a jQuery approach to limiting a body of text to n words, and end with an ellipsis -->