Text properties of CSS3

Font-face
In CSS3, one can download fonts from the web and use them using font-face rule. You just need to include it on your web-server. Once the user visits your website, the font will be downloaded to their machine if they don't have it. It is specified with the @font-face property. For ex:
@font-face {
 font-family: MyHelvetica;
 src: url(myHelvetica.woff);
}

If you to use it on any element then you specify it as font-family of that element as follows:
p {
 font-family: MyHelvetica;
}

Text Effects 
Overflow property: 
How will you handle a text-overflow in CSS? CSS3 introduced a new property called as text-overflow that can be defined as ellipsis or clipped. With ellipsis, the overflowing text will be replaced by ellipsis. Similarly, with clip, the overflowing text will be clipped. It is defined as follows:
div {
 text-overflow: clip;
}

div {
 text-overflow: ellipsis;
}

Moreover, there is an overflow property that can be specified with text-overflow. overflow property can take hidden or visible values. If you specify overflow as hidden then the cropped or hidden text will not be visible. if you specify overflow as visible, then you can see the cropped text. For ex:
div {
 overflow: hidden;
 text-overflow: clip;
}

div {
 overflow: visible;
 text-overflow: clip;
}


Word-wrap
If there is a very lengthy word then it might end up overflowing out of your div or p. In that case, you can specify word-wrap as break-word;
p {
 word-wrap: break-word;
}
Word-wrap can take two other values: keep-all, break-all keep-all: It will break the lengthy words at hyphens. break-all: It will break the lengthy words at any character. Ex:
p {
 word-wrap: keep-all;
}

p {
 word-wrap: break-all;
}
What is the difference between break-all and break-word? break-word will adjust the words so they do not break in middle. And it will wrap long words onto the next file. break-all will break the word at the width limit. The words that are broken can be any words(lengthy or not).

You might also like:
CSS Properties

No comments:

Post a Comment

NoSQL

This one is reviewed but I need to delete its copy from hubpages or somewhere NoSQL Data models: key-value  Aggregate model.  key or i...