with - texto cortado css
Uso del desbordamiento de texto CSS para variar el número de líneas de texto dentro de un elemento de una altura establecida (4)
Prueba este: jsfiddle.net/7BXtr/ . Solo utiliza CSS (no JavaScript).
Básicamente, el texto tiene un overflow: hidden aplica overflow: hidden , y ... se coloca después de él.
Desventajas:
- Una elipsis siempre aparecerá después de la descripción, incluso si es corta.
- Las elipsis siempre aparecen en las mismas posiciones a la derecha.
Estoy profundamente involucrado en el desarrollo de aplicaciones web de iPhone (Safari / WebKit) en este momento y quiero tener elementos de una altura determinada con texto de título y texto de cuerpo tal que siempre se muestren 3 líneas. Si el texto del título es corto, deben aparecer 2 líneas de texto del cuerpo. Si el texto del título es muy largo, debería ocupar un máximo de 2 líneas y dejar 1 línea para el texto del cuerpo. Cada vez que se trunca el texto, debe mostrar una elipsis como último carácter.
Se me ocurrió lo siguiente que hace todo lo que necesito, excepto que no muestra los puntos suspensivos. ¿Hay alguna manera de obtener esta solución para satisfacer ese último requisito?
Código a continuación, tal como lo muestra Safari http://segdeha.com/assets/imgs/stack-ellipsis.png
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#container {
width: 100px;
}
p {
/* white-space: nowrap; */
font-family: Helvetica;
font-size: 12px;
line-height: 16px;
text-overflow: ellipsis;
max-height: 48px;
overflow: hidden;
border: solid 1px red;
}
strong {
/* white-space: nowrap; */
font-size: 16px;
display: block;
text-overflow: ellipsis;
max-height: 32px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container">
<p>
<strong>Short title</strong>
This is the text description of the item.
It can flow onto more than 2 lines, too,
if there is room for it, but otherwise
should only show 1 line.
</p>
<p>
<strong>Long title that will span more
than 2 lines when we''re done.</strong>
This is the text description of the item.
It can flow onto more than 2 lines, too,
if there is room for it, but otherwise
should only show 1 line.
</p>
</div>
</body>
</html>
Puede especificar el tamaño de fuente que se usará dentro de este campo ( font-size ), luego fijar la height y el width del campo (porque ahora sabe cuántas líneas de font-size tamaño de font-size pueden caber) y luego usar la propiedad de overflow (no text-overflow )
Sé que esto es demasiado tarde para una respuesta. Pero para otros que buscan el mismo problema: estoy desarrollando la respuesta de Magnus Magnusson.
Para crear un tono translúcido, puede usar la propiedad box-shadow que se puede usar para crear un efecto de tono interno.
Una solución a este problema es desvanecer el texto en lugar de agregar puntos suspensivos. Si esta es una alternativa aceptable para usted, siga leyendo.
Como la altura de la línea se fija en 16px, puede usar una imagen png simple con un degradado (o usar un degradado css3) que pase de transparente al color de fondo relevante y colocarlo en la esquina inferior derecha del párrafo.
Lo mismo funcionará para el encabezado si coloca la imagen de gradiente 16px desde la parte superior para que solo sea visible si el encabezado alcanza dos líneas (gracias al desbordamiento oculto).