Autor Tema: HTML y CSS efecto ellipsis con multilínea recortar el texto al final CU01041D (Leído 4787 veces)

Boletos · « **en:** 08 de Febrero 2016, 18:56 »

Hola! Solo dos cuestiones antes de poner los ejercicios:

1.- Que sentido tiene dar una altura de linea 5% más de lo normal en la primera caja, si al aplicar la orden "nowrap", se ve solo una única linea?

2.- Existe alguna forma de que 'text-overflow:"...seguir leyendo"' aparezca al final de la caja y no solo en una única linea?

html:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<meta name="keyword" content="palabras clave"/>
	<meta name="description" content="Ejercicio 1041"/>
	<title>Ellipsis sombra</title>
	<link rel="stylesheet" type="text/css" href="ejer1041.css"/>
</head>
<body>
	<div id="div1">
	 El div 1 <span>debe contener</span> un texto suficientemente 
	 largo como para exceder el tamaño del contenedor, y el
	 excedente de texto no debe mostrarse apareciendo en el
	 punto final unos puntos … . La altura de línea debe ser 
	 un 5 % superior a lo normal. Un fragmento del texto 
	 (delimitarlo con span) debe tener tamaño de fuente 
	 18 píxeles y una sombra sólida de color rojo con 
	 desplazamiento hacia la derecha y abajo.
    </div>
    <div id="div2">
	 El div 2 debe contener un texto <span>suficientemente</span>
	 largo como para exceder el tamaño del contenedor, y el
	 excedente de texto no debe mostrarse aunque rebase al
	 contenedor, y no deben aparecer puntos en el lugar donde 
	 se corte el texto. La altura de línea debe ser un 10 % 
	 superior a lo normal. Un fragmento del texto (delimitarlo
	 con span) debe tener tamaño de fuente 18 píxeles y una
	 sombra sólida de color azul con desplazamiento hacia la
	 izquierda y abajo.  Un fragmento del texto (delimitarlo
	 con span) debe tener tamaño de fuente 18 píxeles y una
	 sombra sólida de color azul con desplazamiento hacia la
	 izquierda y abajo.
    </div>
    <div id="div3">
	 El div 3 debe tener alineación del <span>texto justificada</span>
	 y color de texto #8B4513. Debe contener un texto
	 suficientemente largo como para exceder el tamaño del 
	 contenedor. La altura de línea debe ser un 20 % superior
	 a lo normal. Un fragmento del texto (delimitarlo con span)
	 debe tener tamaño de fuente 18 píxeles y una sombra con 
	 efecto de difuminado de color verde de modo que parezca 
	 que existe vapor verde detrás del texto. Un fragmento 
	 del texto (delimitarlo con span) debe tener tamaño de
	 fuente 18 píxeles y una sombra con efecto de difuminado 
	 de color verde de modo que parezca que existe vapor
	 verde detrás del texto.
    </div>
</body>
</html>

css:

Código: [Seleccionar]

/*Ejercicio 1041 text-overflow, shadow, line-height*/
*{font-family: arial;}
div {width: 240px; height: 300px; margin: 18px; padding: 8px;
	border:solid 3px blue; display:inline-block; float:left;}
#div1 {overflow:hidden; text-overflow:ellipsis;
	white-space:nowrap; line-height:105%;}
#div1 span{text-shadow:1px 1px red;}
#div2{overflow:hidden; line-height:110%;}
#div2 span{text-shadow:-1px 1px blue;}
#div3{text-align:justify; color:#8b4513; line-height:120%;}
#div3 span {text-shadow:1px 1px 5px green, -1px -1px 5px green;}
span{font-size:18px;}

Un saludo!!
Y gracias!!

Mario R. Rancel · « **Respuesta #1 en:** 10 de Febrero 2016, 09:18 »

Buenos días

El ejercicio está bien, cumpliendo con lo que se pedía.

Sobre las preguntas:

1. Es cierto que teniendo una sola línea no tiene demasiado interés cambiar un line-height. No obstante, aunque tengas una sola línea, su visualización puede cambiar al variar el valor de line-height. Prueba a ponerle un valor line-height:305%; y debería verse distinto.

2. Es una demanda de los programadores el que se facilite alguna forma de conseguir el efecto ellipsis cuando se trabaja con múltiples líneas, ya que text-overflow:ellipsis; white-space:nowrap; supone una limitación al solo funcionar con una línea. Algunos navegadores han implementado soluciones para esto, pero todavía no están estandarizadas. Posiblemente se estandarice algo para resolver esto y dentro de unos meses ya se pueda utilizar algo estándar vía css. Mientras tanto, para resolverlo hay que recurrir a css-tricks ("trucos css") o a otras posibilidades como JavaScript, cortar el texto del lado del servidor, etc.).

Algunos navegadores admiten esto pero otros no:

Código: [Seleccionar]

.block-with-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
}

Saludos

Boletos · « **Respuesta #2 en:** 11 de Febrero 2016, 09:45 »

Hola! Mario.
Con respecto al código que expones: lo pruebo y no veo diferencia con "overflow:hidden", aunque no se si "-webkit-box" debe contener algo !?. Supongo que mientras tanto el corte, lo hay que hacer a mano, calcular donde acaba el texto y poner un vinculo <a href="http...">...continuar leyendo</a> al final.
El desconocimiento es enorme.
Gracias por tú ayuda.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: