Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: 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
<!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
/*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;}
-
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. ;D
-
Gracias por las aclaraciones, trataré de tenerlas en cuenta la próxima vez que las necesite. ;)