Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: 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:
<!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!!
-
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:
.block-with-text {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
Saludos
-
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.