3 Texto

Textos
Dentro de los textos, CSS3 ha incoporado nuevas e interesantes herramientas entre la

que se destacan el poder utilizar fuentes externas, realizar una diagramacin con multicolumnas y el recorte de palabras.
Aqu las nuevas especificaciones:
Recorte de palabras
Multi-Columna
Fuentes @font-face
Recorte de palabras
Un problema muy comn que suele suceder, es cuando tenemos un div o caja
con texto, y una palabra suele ser mas larga que el ancho de la caja misma.
Por lo general, cuando esto sucede, pueden pasar 2 cosas: Que el div se deforme
(agrande) para contener la palabra larga, o que la palabra se muestra por fuera de
los bordes de la caja.
Para evitar esto, CSS3 hay incorporado una nueva propiedad llamada wordwrap que lo que hace , es recortar las palabras largas cuando estas superen el
ancho del div que la contiene.
El atributo word-wrap tiene dos posibles valores: normal o break-word.
?
word-wrap: normal;
word-wrap: break-word;
Por defecto viene en
normal.
Esto hace que las palabras largas no se corten.
En el siguiente ejemplo, veremos un div de 300px de ancho con borde rojo,
donde he colocado un texto que contiene una palabra mas larga que 300 px.
Si la propiedad word-wrap: normal; estuviera en normal o no estuviera
especificada, el resultado seria el siguiente:
Como vemos, la palabra larga excede el ancho del div contenedor.

Pero si aplicamos la el valor word-wrap: break-word; esta palabra larga se
cortara de la siguiente forma:

Aqu el codigo completo del ejemplo:
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Recorte de palabras</title>
<style type="text/css">
#caja {
width: 300px;
word-wrap: break-word;
border: medium dotted #F00;
}
</style>
</head>
<body>
<div id="caja">Esta es una prueba del recorte de palabras.
sdfsdfdsfdsfdsfsdfdsfsdfdsfdsfdsfdsdfsdfdsfsdfdsfdsfsdfsdfsdf Esta es
una prueba del recorte de palabras. Esta es una prueba del recorte de
palabras. Esta es una prueba del recorte de palabras. Esta es una
prueba del recorte de palabras. Esta es una prueba del recorte de
palabras. </div>
</body>
</html>
NOTA: esta funcionalidad es compatible con IE.
Multi-Columna
Una de las incorporaciones mas novedosas de CSS3 es la posibilidad de generar

texto multicolumna, sin tener que crear una estructura especial para ello.
Esta funcin es muy til para poner textos extensos y que se visualicen tipo
peridico.
Para crear una estructura multi-columna utilizaremos varios atributos, que
servirn para crear y modelar las columnas:
colum-width: servir para definir la anchura de las distintas columnas a crear.
column-gap: nos permitir definir el espacio en blanco entre columnas.
column-rule: servir para crear un filete o lnea divisoria entre las columnas.
Recordemos que para que sean compatible entre navegadores, podemos utilizar
los prefijos, -moz- en el caso deFirefox y -webkit- para el navegador Safari
o Chrome.
En el siguiente ejemplo he creado 2 modelos de 5 columnas.

La diferencia es que en el primero he definido los anchos de columnas en 200px,
y no la cantidad de las mismas.
En el segundo caso, no he definido el ancho pero si la cantidad de columnas, en
este caso 5.
Aqu el navegador dividir el ancho de la pantalla, y colocar la cantidad de
columnas que le indiquemos.
Para esto gener 2 DIVs identicos con texto extenso y dos clases de CSS que la
cual aplique una a cada DIV.
La primera clase llamada multicolumna defin un ancho de columna de
300px, una separacin entre columnas de 15px, y un filete separador de 1 px de
ancho, solido y de color gris.
?
.multicolumna{
-moz-column-width: 300px;
-moz-column-gap: 15px;
-webkit-column-width: 300px;
-webkit-column-gap: 15px;
-webkit-column-rule: 1px solid #ccf;
-moz-column-rule: 1px solid #ccf;
}
En la segunda clase multicolumna5columnas defin lo mismo, pero en lugar

de indicarle el ancho de la columna, solo le especifiqu la cantidad de columnas
que deseaba (4):
?
.multicolumna5columnas{
-moz-column-count: 4;
-webkit-column-count: 4;
}
* Ntese que utilice los prefijos de los diferentes navegadores,
para asegurar la
compatibilidad.
Especificar el nmero de columnas es quizs ms cmodo, pero en pginas
fluidas puede funcionar peor, porque no se sepa con certeza qu anchura va a
tener el lugar donde se muestran los textos y por tanto unas veces queden
columnas muy anchas y otras muy estrechas.
El codigo XHTML + CSS final seria el siguiente:
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Texto Multi-columna CSS 3</title>
.multicolumna{
-moz-column-width: 300px;
-webkit-column-width: 300px;

}
.multicolumna5columnas{
-moz-column-count: 4;
-webkit-column-count: 4;
}
</style>
</head>
<body>
<h2>Mulicolumna definiendo el tamaño de columna</h2>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
posuere, quam nec pulvinar dignissim, tortor risus mattis nibh, vitae
accumsan justo metus nec nisi. Vivamus nec enim ultrices leo placerat
sodales in id metus. Ut fermentum nunc quis tortor bibendum lacinia.
Sed bibendum sodales aliquet. Fusce a pretium magna. Donec lobortis
purus ac nulla blandit fermentum. Nullam vitae magna ipsum. Sed
ultricies dictum felis, sed vulputate lacus feugiat nec. Vivamus
molestie erat id dui condimentum commodo. Duis congue lacus id eros
hendrerit tempor. Nunc sagittis commodo consectetur. Quisque
scelerisque facilisis dui, luctus ullamcorper diam faucibus sagittis.
Quisque blandit sagittis nisi, nec volutpat tellus pretium eget.
Phasellus porta dui quis mauris laoreet quis molestie ante tincidunt.
Quisque convallis scelerisque lobortis. Proin eu lacus tortor, in
venenatis turpis. Morbi diam quam, dignissim non laoreet eu, dapibus
vitae est. Suspendisse condimentum, sem non gravida convallis, dui
justo tincidunt urna, sed tincidunt lectus odio non purus. Aenean a
commodo sapien.</p>
<p>Suspendisse ut nulla sed sem faucibus ultrices. Etiam suscipit nisl
non arcu lacinia vestibulum. Pellentesque commodo nisi posuere ipsum
suscipit in scelerisque urna porta. Morbi faucibus dignissim augue ut
euismod. Proin ut risus nunc. Donec purus enim, aliquam sit amet
euismod facilisis, posuere eget quam. Fusce at elit sapien, in egestas
lacus. In in leo eros, vel posuere mauris. Morbi ullamcorper convallis
sapien, at suscipit mauris adipiscing molestie. Morbi magna urna,
porttitor vitae iaculis ut, tincidunt at massa. Nunc purus urna,
blandit dapibus gravida quis, molestie eget eros. Curabitur varius,
ligula nec fermentum adipiscing, dolor nisl rhoncus neque, eget
accumsan mauris enim non purus. Vivamus lectus mi, ultrices vel mollis
ac, posuere quis nisl. Nulla dictum ante vitae felis eleifend
lobortis. Nunc elementum gravida viverra. Vestibulum ante ipsum primis
in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Proin tortor dolor, tincidunt et facilisis sed, aliquet sit amet
elit. Aenean lectus magna, euismod at vulputate at, sodales eu eros.
Pellentesque volutpat convallis arcu, eget dapibus nibh pharetra in.
Aliquam sapien libero, convallis quis facilisis eu, ullamcorper id
nisl. Nunc congue ante non enim egestas non volutpat ligula dignissim.
Vestibulum eleifend tempus purus, at vehicula lorem rutrum nec. Aenean
volutpat magna et purus rutrum posuere. Etiam lobortis nisi vitae leo
aliquet vestibulum. Vestibulum pharetra malesuada felis id blandit.
Morbi sit amet facilisis augue. Etiam sapien elit, vehicula eu ornare
in, interdum eget augue.</p>
<p>Pellentesque et mi libero, et volutpat ligula. Sed bibendum velit
vitae sapien posuere nec tempor nisl cursus. Donec orci leo, varius
vel aliquet at, sodales sed risus. Phasellus sapien elit, pretium vel
laoreet vel, tempus sit amet erat. Nulla metus tortor, ornare ut
accumsan at, faucibus id sapien. Donec ultrices dolor at sapien

venenatis non rutrum neque dictum. Quisque faucibus arcu non nisl
sodales sagittis vitae vel dolor. Nam pretium consectetur convallis.
Duis diam lectus, ultricies nec placerat placerat, posuere ac arcu.
Aenean libero nisi, accumsan non dapibus vel, aliquam vel mi.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas.</p>
</div>
<h2>Mulicolumna definiendo la cantidad de columnas (4)</h2>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
posuere, quam nec pulvinar dignissim, tortor risus mattis nibh, vitae
accumsan justo metus nec nisi. Vivamus nec enim ultrices leo placerat
sodales in id metus. Ut fermentum nunc quis tortor bibendum lacinia.
Sed bibendum sodales aliquet. Fusce a pretium magna. Donec lobortis
purus ac nulla blandit fermentum. Nullam vitae magna ipsum. Sed
ultricies dictum felis, sed vulputate lacus feugiat nec. Vivamus
molestie erat id dui condimentum commodo. Duis congue lacus id eros
hendrerit tempor. Nunc sagittis commodo consectetur. Quisque
scelerisque facilisis dui, luctus ullamcorper diam faucibus sagittis.
Quisque blandit sagittis nisi, nec volutpat tellus pretium eget.
Phasellus porta dui quis mauris laoreet quis molestie ante tincidunt.
Quisque convallis scelerisque lobortis. Proin eu lacus tortor, in
venenatis turpis. Morbi diam quam, dignissim non laoreet eu, dapibus
vitae est. Suspendisse condimentum, sem non gravida convallis, dui
justo tincidunt urna, sed tincidunt lectus odio non purus. Aenean a
commodo sapien.</p>
<p>Suspendisse ut nulla sed sem faucibus ultrices. Etiam suscipit
nisl non arcu lacinia vestibulum. Pellentesque commodo nisi posuere
ipsum suscipit in scelerisque urna porta. Morbi faucibus dignissim
augue ut euismod. Proin ut risus nunc. Donec purus enim, aliquam sit
amet euismod facilisis, posuere eget quam. Fusce at elit sapien, in
egestas lacus. In in leo eros, vel posuere mauris. Morbi ullamcorper
convallis sapien, at suscipit mauris adipiscing molestie. Morbi magna
urna, porttitor vitae iaculis ut, tincidunt at massa. Nunc purus urna,
blandit dapibus gravida quis, molestie eget eros. Curabitur varius,
ligula nec fermentum adipiscing, dolor nisl rhoncus neque, eget
accumsan mauris enim non purus. Vivamus lectus mi, ultrices vel mollis
ac, posuere quis nisl. Nulla dictum ante vitae felis eleifend
lobortis. Nunc elementum gravida viverra. Vestibulum ante ipsum primis
in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Proin tortor dolor, tincidunt et facilisis sed, aliquet sit amet
elit. Aenean lectus magna, euismod at vulputate at, sodales eu eros.
Pellentesque volutpat convallis arcu, eget dapibus nibh pharetra in.
Aliquam sapien libero, convallis quis facilisis eu, ullamcorper id
nisl. Nunc congue ante non enim egestas non volutpat ligula dignissim.
Vestibulum eleifend tempus purus, at vehicula lorem rutrum nec. Aenean
volutpat magna et purus rutrum posuere. Etiam lobortis nisi vitae leo
aliquet vestibulum. Vestibulum pharetra malesuada felis id blandit.
Morbi sit amet facilisis augue. Etiam sapien elit, vehicula eu ornare
in, interdum eget augue.</p>
<p>Pellentesque et mi libero, et volutpat ligula. Sed bibendum velit
vitae sapien posuere nec tempor nisl cursus. Donec orci leo, varius
vel aliquet at, sodales sed risus. Phasellus sapien elit, pretium vel
laoreet vel, tempus sit amet erat. Nulla metus tortor, ornare ut
accumsan at, faucibus id sapien. Donec ultrices dolor at sapien
venenatis non rutrum neque dictum. Quisque faucibus arcu non nisl
sodales sagittis vitae vel dolor. Nam pretium consectetur convallis.
Duis diam lectus, ultricies nec placerat placerat, posuere ac arcu.
Aenean libero nisi, accumsan non dapibus vel, aliquam vel mi.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas.</p>

<p>Vivamus eleifend tempor est nec eleifend. Cras vestibulum congue
faucibus. Fusce eleifend adipiscing posuere. Integer tempus tempor
congue. Cras non orci sed ligula egestas mollis. Nullam eleifend
malesuada nisi a tempus. Pellentesque sit amet risus augue. Integer
nec nisi in ipsum lacinia auctor. Morbi eget ante felis, eget
dignissim est. In gravida hendrerit enim, a euismod nisl faucibus non.
Etiam vulputate mattis enim ac interdum. Ut sit amet diam a magna
elementum lobortis ac nec neque. Nullam mauris dolor, hendrerit et
dictum pellentesque, tincidunt auctor arcu. Ut vitae vestibulum dui.
Aliquam erat volutpat.</p>
<p>Donec sodales commodo purus, nec viverra turpis mollis ac. Etiam
tristique tempus nisi, vel lacinia quam aliquet sed. Mauris vitae diam
nibh. Donec lectus leo, fringilla vel fringilla eu, semper vehicula
nulla. Vivamus vel quam sit amet metus cursus placerat sed eget magna.
Praesent tellus enim, egestas in congue vitae, tincidunt et massa.
Suspendisse id tortor lorem, sit amet lobortis purus. Ut sed hendrerit
tellus. Aliquam erat volutpat. Morbi sit amet pretium massa. Sed
egestas lacus eget lacus pulvinar sed tincidunt lectus tempor. Nam a
augue ante. Suspendisse potenti. Morbi egestas, nisl sit amet
elementum lacinia, nibh leo pretium nisl, eu dictum nisi felis ut
ante. Donec laoreet est at lorem luctus suscipit. Quisque scelerisque,
eros venenatis fermentum interdum, felis felis congue ante, at
suscipit metus ligula quis massa. Duis eros urna, tristique in
tincidunt fermentum, fermentum in nunc.</p>
<p>Vestibulum vel ligula magna, vel tempus leo. Suspendisse potenti.
Aenean ut consequat nisi. Quisque imperdiet turpis ut lacus mattis vel
viverra eros ultricies. Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae; Phasellus felis diam,
fermentum nec consectetur eu, pretium viverra ipsum. Aliquam hendrerit
vehicula porta. Sed tincidunt faucibus risus, commodo interdum nibh
iaculis eu. Nullam iaculis sem vel odio aliquam vestibulum. Sed quis
rutrum odio.</p>
<p>Phasellus et vulputate metus. Donec eu diam augue. In porttitor
felis in urna accumsan eleifend. In luctus tortor sed mauris
scelerisque egestas. Vestibulum a mauris non urna egestas pharetra
quis sit amet sapien. Pellentesque ultrices elementum libero sit amet
rhoncus. Nullam posuere bibendum quam quis tempus. Fusce nunc turpis,
rhoncus non placerat ut, elementum vel dui. Suspendisse potenti.
Maecenas eu arcu mi, et fringilla ipsum. Morbi ultricies, diam vel
luctus tristique, nisl dolor gravida odio, vitae ultricies dui enim
nec augue. Quisque sem lorem, sagittis sit amet luctus ut, lobortis
non ligula. </p>
</div>
</body>
</html>
Aqu el ejemplo final:
Fuentes @font-face
Normalmente, la seleccin de la tipografas o fuentes a utilizar en una pgina web, se

restringa a las fuentes estndar de sistema como Arial, Verdana, Times, Courrier,
Tahoma, Trebuchet.
Esto era porque estas fuentes estn en prcticamente en todos las computadoras de hoy
en dia.
Si nosotros, por medio de CSS le especificbamos una fuente diferente a las estndar, y
el usuario que visualizaba la pagina, no tena la fuente instalada, el navegador la
reemplazaba por alguna de las fuentes antes mencionadas.
Gracias a una nueva caracterstica de CSS3, ahora podemos incluir cualquier fuente,
ampliando generosamente las posibilidades de diseo de nuestro layout web.
Esta solucin lleg de la mano de la regla @font-face y lo que nos permite
sencillamente es definir otra fuente que queramos usar, con la nica condicin de que la
misma est instalada en el servidor que alojar el sitio, o mejor dicho, que est dentro de
los archivos del sitio mismo.
Antiguamente admita solo formatos de fuentes tipo .eot, pero con el paso del tiempo se
ampliaron la posibilidades se soporte, comenzando con Safari 3,1. En la actualidad
admite otros tipos de formatos tipogrficos como son .ttf y .otf y funciona tambin con
los navegadores Opera, Chrome y Firefox.
Lo que hace bsicamente ela regla @font-face es definir nuevas familias tipogrficas
dentro de nuestra hoja de estilos CSS.
La sintaxis CSS es muy simple, aqu un ejemplo:
@font-face {
font-family: 'Alkidenz';
font-style: normal;
font-weight: normal;
src: url('AkzidenzGrotesk-Cond.otf');
}
H1{
}
Primero creamos una nueva familia llamada Alkidenz dentro de la propiedad Fontfamily.
Luego le damos estilo y peso normales (font-style, font-weight)
Y por ultimo con la propiedad src: url(); definimos el nombre del archivo de nuestra
fuente, el cual en este caso est en la misma carpeta que el archivo HTML y CSS.
Luego definimos que la etiqueta H1, usar la familia de fuente que acabamos de crear
Alkidenz.
Para que @font-face funcione en Internet Explorer debemos utilizar fuentes del tipo
.eot.
Entonces debemos hacer uso de los condicionales del tipo IF, que ejecutan un cdigo
especfico si detecta que estamos usando IE.
En ese caso, le indicaremos que use una fuente del tipo .eot.
NOTA: Para convertir fuentes .ttf a .eot, por ejemplo, podemos usar Font Squirrel
Generator.
En este caso nuestro cdigo CSS quedara asi:
h1{
}
/* TODOS LOS NAVEGADORES MODERNOS*/
@font-face {
font-style: normal;
font-weight: normal;
src: url('AkzidenzGrotesk-Cond.otf');
}
</style>

Aqu los ejemplos:

3 Texto

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

3 Texto

Cargado por

Copyright:

Formatos disponibles

Textos

Dentro de los textos, CSS3 ha incoporado nuevas e interesantes herramientas entre la

Como vemos, la palabra larga excede el ancho del div contenedor.

NOTA: esta funcionalidad es compatible con IE.

Una de las incorporaciones mas novedosas de CSS3 es la posibilidad de generar

En el siguiente ejemplo he creado 2 modelos de 5 columnas.

En la segunda clase multicolumna5columnas defin lo mismo, pero en lugar

* Ntese que utilice los prefijos de los diferentes navegadores,

-webkit-column-rule: 1px solid #ccf;

accumsan at, faucibus id sapien. Donec ultrices dolor at sapien

fames ac turpis egestas.</p>

Normalmente, la seleccin de la tipografas o fuentes a utilizar en una pgina web, se

Aqu los ejemplos:

También podría gustarte