Autor Tema: HTML y CSS text-transform, letter-spacing, word-spacing. Ejercicio CU01042D (Leído 2024 veces)

Chompy129 · « **en:** 18 de Septiembre 2016, 23:22 »

CSS text-transform y first-letter, letter-spacing y word-spacing. Cortar palabras largas con word-wrap (CU01042D)

Aquí esta el ejercicio, sinceramente no se porque especificaron colocar tanto espacio entre letras pero de todas formas aqui esta lo que se pide:

Código HTML

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Ejercicio con TEXT-TRANSFORM</title>
	<link rel="stylesheet" type="text/css" href="Ejercicio_text-transform.css">
</head>
<body>
	<div id="div1"><p>Continuamos repasando propiedades que resultan de interés para darle formato a </p><p>textos como text-transform, que nos permitirá entre otras posibilidades transfomar un texto a mayúsculas o minúsculas.</p></div>

	<div id="div2">Continuamos repasando <span>propiedades</span> que resultan de interés para darle formato a textos como text-transform, que nos permitirá entre otras posibilidades transfomar un texto a mayúsculas o minúsculas.</div>

	<div id="div3">Continuamos repasando propiedades que resultan de interés para darle formato a textos como text-transform, que nos permitirá entre otras <span>posibilidaaaaaaaaaaaaaaades</span> transfomar un texto a mayúsculas o minúsculas.</div>
</body>
</html>

Código CSS

Código: [Seleccionar]

/*DATOS GENERALES*/
*{font-family: arial;}

/*Div*/
div{float: left;
	margin: 33px; padding: 0;
	width: 180px; height: 300px;
	border: 6px solid #F00;}

/*Div por id*/
#div1{text-transform: uppercase; letter-spacing: 0.05em;}
	#div1 p::first-letter{font-size: 250%;}

#div2{text-transform: lowercase; letter-spacing: 0.1em;}
	#div2 span{background-color: #FFC; word-wrap: break-word;}

#div3{text-transform: capitalize; word-spacing: 0.1em;}
	#div3 span{background-color: #FFC; word-wrap: normal;}

pedro,, · « **Respuesta #1 en:** 19 de Septiembre 2016, 01:25 »

Buenas Chompy129.

a, bien.

b, bien.

c, Te falta una palabra que sobrepase la anchura de la caja y que sea cortada. Según tienes el código, para que esto suceda, la palabra tendría que estar dentro de las etiquetas "span", con lo que "word-wrap:break-word;" debería de ir dentro de los estilos que afecten a "#div2" y que haga efecto a todo el contenido del segundo div.

d, Te pasa lo casi lo mismo que en el apartado c. Pero en este caso si tienes la palabra. La diferencia estaría en que word-wrap:normal; si no lo declaras tendrías el mismo resultado.

Saludos.

Chompy129 · « **Respuesta #2 en:** 19 de Septiembre 2016, 19:56 »

Gracias por las aclaraciones, trataré de tenerlas en cuenta la próxima vez que las necesite.

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

Noticias: