21
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:CSS y HTML mostrar espacios dentro de un texto pre-wrap text-indent CU01040D
« en: 22 de Enero 2016, 14:45 »
Traigo el ejercicio una vez más resuelto.
Pero no comprendo lo de white-space: pre-warp. En ese caso lo he puesto para que mantenga los 15 espacios y salte de línea cuando el contenedor llega a su borde.
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<style type="text/css">
*{font-family: arial;}
div {width: 200px; height: 400px; margin: 20px; padding: 10px; border-style:solid; border-width: 4px; display:inline-block; vertical-align:top;}
#caja1 {text-align:center; color: #FF6347; text-indent: 10%;}
.subrayado {text-decoration: underline;}
#caja2 {text-align: right; color: #008080; text-indent: 50px; white-space:pre-line;}
.subrayadoporencima {text-decoration: overline;}
.tachado {text-decoration: line-through;}
#caja3 {text-align: justify; color: #8B4513; text-indent: 20%; white-space:pre-wrap;}
.espacio {outline: 1px dashed red;}
</style>
</head>
<body>
<div id="caja1">
Hola, ¿Cómo estas? <span class="subrayado">Soy caja número 1</span> y vine hacer nuevos amigos en este vecindario.
</div>
<div id="caja2"> <p>Un texto <span class="subrayadoporencima">
suficientemente</span> largo para elaborar cosas extrañas de manera injusta :v</p>
</div>
<div id="caja3"> <p>¿Por qué <span class="tachado">siempre somos</span> el villano del cuento? ¿No podemos ser el héroe? Apartir de acá se empiezan a contar los 15 espacios:<span class="espacio"> </span>Listo</p>
</div>
</body>
</html>
Pero no comprendo lo de white-space: pre-warp. En ese caso lo he puesto para que mantenga los 15 espacios y salte de línea cuando el contenedor llega a su borde.