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

Resumen: Entrega nº42 del Tutorial básico del programador web: CSS desde cero.
Codificación aprenderaprogramar.com: CU01042D

 

MÁS CONTROL DEL TEXTO CSS

Continuamos repasando propiedades 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.Además veremos como word-spacing y letter-spacing nos permiten variar el espacio de separación entre palabras o letras y word-wrap nos permitirá romper palabras largas que no caben en su contenedor y no tienen espacios intermedios que permitan crear saltos de línea.

css

 

PROPIEDAD TEXT-TRANSFORM

PROPIEDAD CSS text-transform
Función de la propiedad Permite transformar la apariencia de un texto.
Valor por defecto none
Aplicable a Todos los elementos
Valores posibles para esta propiedad none (no hay transformación del texto)
uppercase (transforma el texto a mayúsculas)
lowercase (transforma el texto a minúsculas)
capitalize (convierte la primera letra de cada palabra en mayúsculas)
inherit (se heredan las características del elemento padre).
Ejemplos aprenderaprogramar.com #content1 {text-transform: uppercase;}

 

 

Supongamos que tenemos el texto: “La mejor web para APRENDER a programar”. Los efectos serían:

uppercase: LA MEJORA WEB PARA APRENDER A PROGRAMAR

lowercase: la mejor web para aprender a programar

capitalize: La Mejor Web Para Aprender A Programar

 

Recordar que hay un selector que nos permite definir estilos para la primera letra de texto de un párrafo o contenedor que es first-letter. Podemos combinar este selector con text-transform para poner la primera letra en un formato especial. Por ejemplo p::first-letter {font-size: 300%; text-transform: uppercase;} nos permite poner la primera letra en mayúsculas y con un formato extragrande.

 

 

PROPIEDADES LETTER-SPACING Y WORD-SPACING

Se trata de dos propiedades de uso no habitual que permiten establecer una separación entre letras específica o una separación entre palabras específica.

Su valor por defecto es normal y se establecen indicando una unidad de medida válida en CSS como valores en píxeles o en em.

Ejemplos: content1 { letter-spacing: 9px;}

#jukBox { word-spacing: 1.3em;}

Se admiten valores negativos, pero en algunos casos pueden generar efectos extraños indeseados (por ejemplo superposición de palabras o letras unas encima de otras).

 

 

PROPIEDAD WORD-WRAP

Ya sabemos que a no ser que hayamos especificado lo contrario con la propiedad white-space, las palabras aprovecharán espacios en blanco para situarse en una nueva línea cuando el espacio a lo ancho es insuficiente en el contenedor. No obstante, existe el problema de que una palabra puede ser tan larga que ocupe todo el ancho disponible y se salga del contenedor sin posibilidad de crear una nueva línea por la falta de espacios en blanco (esto se podría denominar “palabra irrompible”). Usando la propiedad word-wrap cuyo valor por defecto es normal y cuyo único valor posible es break-word podemos especificar que la palabra deberá continuar en una nueva línea incluso cuando no exista un espacio en blanco para generar el salto de línea.

Crea un documento HTML con este contenido para probar esta propiedad y visualiza los resultados:

<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<style type="text/css">
*{font-family: arial; }
h1 {margin: 20px; padding:10px 20px; border-style: solid; border-color: red; border-width: thin;}
</style>
</head>
<body>
<h1 style="width:210px; background-color:yellow;">aprenderaprogramar.com</h1>
<h1 style="width:210px; background-color:yellow; word-wrap: break-word;">aprenderaprogramar.com</h1>
</body>
</html>
 

css word-wrap

 

 

EJERCICIO

Crea un documento HTML y un archivo con la hoja de estilos CSS que cumpla con estos requisitos:

a) Deben exisitir tres contenedores (div1, div2 y div3) situados en horizontal, cada uno con margin 33px en todas direcciones, sin relleno, ancho de 180 píxeles, altura de 300 píxeles y borde sólido de 6 píxeles de anchura con color de borde rojo.

b) El div 1 debe contener un texto suficientemente largo, con numerosos párrafos, como para exceder el tamaño del contenedor. El texto del html debe transformarse completamente a mayúsculas mediante el uso de propiedades CSS. La separación entre letras debe ser un 5% superior a lo normal. La primera letra de cada párrafo debe tener un tamaño un 250% lo normal.

c) El div 2 debe contener un texto suficientemente largo como para exceder el tamaño del contenedor. El texto del html debe transformarse completamente a minúsculas mediante el uso de propiedades CSS. La separación entre letras debe ser un 10% superior a lo normal. Debe contener una palabra (cadena de texto cualquiera) de gran longitud, de modo que no quepa en el contenedor, y “romperse” para no exceder la capacidad del contenedor usando la propiedad word-wrap.

d) El div 3 debe contener un texto suficientemente largo como para exceder el tamaño del contenedor. El texto del html debe transformarse para que toda palabra comience con una letra mayúscula mediante el uso de propiedades CSS. La separación entre palabras debe ser un 10% superior a lo normal. Debe contener una palabra (cadena de texto cualquiera) de gran longitud, de modo que no quepa en el contenedor, y no romperse.

 

Para comprobar si tu código y respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

JULIO - AGOSTO 2017

1. Java / J2EE
2. Entornos Oracle
3. Entornos SQL Server
4. JavaScript, jQuery
5. .NET, C#
6. HTML, CSS
7. Android, iOS
8. Php, MySql


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación