CSS3 – Text
CSS3 – Text
The CSS3-text property supports three features like text-overflow, word-break and word-wrap.
Text-overflow: This property specifies about overflowed content (which is not displayed) is indicated to users. It is categorized as clip and ellipsis.
Word-breaking: This property allows line breaking after the whole word (keep-all) and at any character (break-all).
Word-wrap: This property specifies wrap into the next line by breaking the line.
Example:
<html>
<head>
<style>
p.text1 {
white-space: nowrap;
width: 750px;
border: 1px solid ;
overflow: hidden;
text-overflow: clip;
}
p.text2 {
white-space: nowrap;
width: 730px;
border: 1px solid ;
overflow: hidden;
text-overflow: ellipsis;
}
p.text3 {
width: 150px;
border: 1px solid ;
word-break: keep-all;
}
p.text4{
width: 150px;
border: 1px solid ;
word-break: break-all;
}
p.text5 {
word-wrap: break-word;
}
</style>
</head>
<body>
<b>Original Text:</b>
<p>
CSS3 allows two shadow effects on text and box elements.
Text shadow: This property is used to insert shadow effects on text elements. The shadow effects can be inserted as length, breadth, height and color combination.
Box shadow: By creating a box with width, height and padding in pixels; the box-shadow can be created with appropriate length and breadth in pixels.
</p>
<b>Text overflow:clip:</b>
<p class = "text1">
CSS3 allows two shadow effects on text and box elements.
Text shadow: This property is used to insert shadow effects on text elements. The shadow effects can be inserted as length, breadth, height and color combination.
Box shadow: By creating a box with width, height and padding in pixels; the box-shadow can be created with appropriate length and breadth in pixels.
</p>
<b>Text overflow:ellipsis</b>
<p class = "text2">
CSS3 allows two shadow effects on text and box elements.
Text shadow: This property is used to insert shadow effects on text elements. The shadow effects can be inserted as length, breadth, height and color combination.
Box shadow: By creating a box with width, height and padding in pixels; the box-shadow can be created with appropriate length and breadth in pixels.
</p>
<b>line break after whole word:</b>
<p class = "text3">
CSS3 allows two shadow effects on text and box elements.
Text shadow: This property is used to insert shadow effects on text elements. The shadow effects can be inserted as length, breadth, height and color combination.
Box shadow: By creating a box with width, height and padding in pixels; the box-shadow can be created with appropriate length and breadth in pixels.
</p>
<b>line break at any character</b>
<p class = "text4">
CSS3 allows two shadow effects on text and box elements.
Text shadow: This property is used to insert shadow effects on text elements. The shadow effects can be inserted as length, breadth, height and color combination.
Box shadow: By creating a box with width, height and padding in pixels; the box-shadow can be created with appropriate length and breadth in pixels.
</p>
<b>Word wrap</b>
<p class = "text5">
CSS3 allows two shadow effects on text and box elements.
Text shadow: This property is used to insert shadow effects on text elements. The shadow effects can be inserted as length, breadth, height and color combination.
Box shadow: By creating a box with width, height and padding in pixels; the box-shadow can be created with appropriate length and breadth in pixels.
</p>
</body>
</html>
Output:
