Usar el desbordamiento de texto CSS para variar el número de líneas de texto dentro de un elemento de una altura de conjunto

Estoy metido en algún desarrollo de aplicaciones web para iPhone (Safari/WebKit) en este momento y quiero tener elementos de una altura establecida con el texto del título y el texto del cuerpo de modo que siempre se muestren 3 líneas. Si el texto del título es corto, se deben mostrar 2 líneas de texto del cuerpo. Si el texto del título es muy largo, debe tomar un máximo de 2 líneas y dejar 1 línea para el texto del cuerpo. Siempre que el texto se trunca, debe mostrar una elipsis como el último carácter.Usar el desbordamiento de texto CSS para variar el número de líneas de texto dentro de un elemento de una altura de conjunto

He encontrado lo siguiente que hace todo lo que necesito, excepto que no muestra las elipsis. ¿Hay alguna manera de obtener esta solución para satisfacer ese último requisito?

Code below, as rendered by 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>

Fuente

2009-07-01 Andrew Hedges

Miré http://iphone.facebook.com en Safari (falsificando el agente de usuario de iPhone) y parece que lo hacen en el lado del servidor. Sospecho que estoy condenado al mismo destino. –

He querido hacer algo similar en el pasado. Terminé tratando de dividir las líneas y agregar el lado del servidor de puntos suspensivos. Eso terminó requiriéndome saber cuán ancho y alto sería el texto (en píxeles). Finalmente me rendí frustrado. –

¿JavaScript no está disponible? – peteorpeter

Una solución a este problema es a desaparecer el texto fuera más que para añadir una elipsis. Si esta es una alternativa aceptable para usted, continúe leyendo.

Dado que 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 va desde transparente al color de fondo relevante y colocarlo en la esquina inferior derecha del párrafo.

Lo mismo funcionará para el título si coloca la imagen de gradiente 16px desde la parte superior para que solo sea visible si el encabezado llega a dos líneas (gracias al desbordamiento oculto).

Fuente

2012-06-07 00:08:14

Puede especificar el tamaño de fuente que se utilizará dentro de este campo (font-size), a continuación, fijar la height y width del campo (porque ahora se sabe cuántas líneas de font-size tamaño pueden caber), y luego utilizar la propiedad overflow (no text-overflow)

Fuente

2012-06-07 00:29:55 Eugene

Pruebe este: jsfiddle.net/7BXtr/. Solo usa CSS (sin JavaScript).

Básicamente, el texto tiene overflow: hidden aplicado, y ... se coloca después de él.

Desventajas:

Los puntos suspensivos siempre aparecerá después de la descripción, aunque sea corto.
Las elipses siempre aparecen en las mismas posiciones a la derecha.

Fuente

2012-06-20 02:31:12

El problema es que las elipses siempre se insertarán, incluso si el texto es demasiado corto. – leopic

@LEOPiC Lo sé, es solo una Hacky manera de conseguirlo casi allí. –

Sé que esto es demasiado tarde de 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 de sombreado de caja que se puede usar para crear un efecto de sombreado interior.

Fuente

2014-09-24 01:50:39 UKM

Usar el desbordamiento de texto CSS para variar el número de líneas de texto dentro de un elemento de una altura de conjunto

Respuesta

Cuestiones relacionadas