Text effect properties in CSS allow us to apply different formatting styles to the text within an HTML document. These styles can include splitting up words when a sentence is too long to fit within a line, changing its orientation, and applying any patterns that a programmer needs to add.
This property specifies how the text that overflows out of a boundary should be displayed to the user. This property must be used with two other properties:
There are two types of showing overflown text:
This type cuts the text at the end of the boundary when it is overflowing as follows:
This type adds ellipses or '...' at the end of the text that overflows, as shown below:
text-overflow property has a straightforward syntax and can take the following two properties as discussed earlier:
In the code above, we define two classes of the
p tag, where
p.type1 creates the style for clipped type, and
p.type2 specifies the style for the ellipses type of
text-overflown. You can play around by changing the properties to understand it better.
overflowtags are used for
text-overflowto work, as discussed before.
The second CSS text effect property is
word-wrap, which breaks long words and splits them into the next line. This happens when the last word in a sentence is too long to fit inside a boundary such that it can extend beyond as shown below:
word-wrap property, we can break up the long words to move to the next line for improved readability as follows:
word-break property is similar to
word-wrap because it enables us to specify how to break up paragraphs when they do not fit in a given boundary. It specifies how words at the end of the line should be broken up. There are two types of this property:
This keeps all the words at the end of the line without breaking them. Instead, it moves the entire word to the next line as follows:
This value for
word-break breaks all the words that are causing the line to spill over and splits them onto the next line:
word-break: keep-all| break-all
This CSS property lets the programmer specify if they want the text to be displayed horizontally or vertically. It can be implemented within the
p tag as well as a
horizontal-tbis the default value, which displays the text horizontally from left to right and vertically from top to bottom.
vertical-rldisplays the text vertically from top to bottom and horizontally from right to left.
vertical-lrdisplays the text vertically from top to bottom and horizontally from left to right.
classfor the paragraph with writing mode as horizontal. This is also the default style of a text.
type2class in the
type2class in the
View all Courses