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:
<!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:
/*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!!