Css text

CSS - TEXT
 CSS3 contained several extra features, which is added later on.
• text-overflow
• word-wrap
• word-break

THERE ARE FOLLOWING MOST COMMONLY USED PROPERTY IN CSS3 −
Sr.No. Value & Description
1 text-align-last
Used to align the last line of the text
2 text-emphasis
Used to emphasis text and color
3
text-overflow used to determines how overflowed content that is not displayed is signaled to users
4 word-break
Used to break the line based on word
5 word-wrap
Used to break the line and wrap onto next line

TEXT-OVERFLOW :
The text-overflow property determines how overflowed content that is not displayed is signaled to users. the
sample example of text overflow is shown as follows −
<html>
<head>
<style>
p.text1 {
white-space: nowrap;
width: 500px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.text2 {

white-space: nowrap;
width: 500px;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
Original Text:

Tutorials Point originated from the idea that there exists a class of
readers who respond better to online content and prefer to learn new
skills at their own pace from the comforts of their drawing rooms.

Text overflow:clip:

Tutorials Point originated from the idea that there exists
a class of readers who respond better to online content and prefer
to learn new skills at their own pace from the comforts of their
drawing rooms.

Text overflow:ellipsis

Tutorials Point originated from the idea that there exists
a class of readers who respond better to online content and
prefer to learn new skills at their own pace from the comforts
of their drawing rooms.

</body>
</html>

IT WILL PRODUCE THE FOLLOWING RESULT :

CSS3 WORD BREAKING :
Used to break the line, following code shows the sample code of word breaking.
<html>
<head>
<style>
p.text1 {
width: 140px;
word-break: keep-all;
}
p.text2 {
width: 140px;
word-break: break-all;
}
</style>
</head>
<body>

line break at hyphens:

Tutorials Point originated from the idea that there exists a
class of readers who respond better to online content and prefer
to learn new skills at their own pace from the comforts of
their drawing rooms.

line break at any character

Tutorials Point originated from the idea that there exists a
class of readers who respond better to online content and
prefer to learn new skills at their own pace from the comforts
of their drawing rooms.

</body>
</html>

IT WILL PRODUCE THE FOLLOWING RESULT −

CSS WORD WRAPPING :
Word wrapping is used to break the line and wrap onto next line.the following code will have sample
Syntax –
p {
word-wrap: break-word;
}

Css text

More Related Content

Similar to Css text (20)

More from AbhishekMondal42 (20)

Recently uploaded (20)

Css text