CSS (Cascading Style Sheets) is the mechanism used to add style to web documents. Through CSS, we can apply various effects on text, enhancing its appearance and improving user experience on web pages.
In this article, we’ll cover several key CSS properties that can be used to apply text effects, including:
- text-overflow
- word-wrap
- word-break
- writing-mode
Let’s learn about each of these in detail:
1. Text-Overflow
The text-overflow property in CSS helps handle text that exceeds the width of its container. It defines how the overflowed content should be represented when the text doesn’t fit within its container.
Syntax:
element {
text-overflow: clip | ellipsis;
//CSS Property
}Values:
- clip: This is the default value. It truncates the text at the edge of the content area, even if it cuts off characters in the middle.
- ellipsis: Replaces the clipped text with an ellipsis (…). The ellipsis is displayed inside the content area and reduces the amount of visible text.
Example 1: text-overflow: clip
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div.geek {
white-space: nowrap;
width: 200px;
overflow: hidden;
border: 1px solid #000000;
font-size: 20px;
text-overflow: clip;
}
div.geek:hover {
overflow: visible;
}
</style>
</head>
<body style="text-align: center">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>
text-overflow: clip
</h2>
<div class="geek">
A Computer Science portal for geeks.
</div>
</body>
</html>
Output:
Example 2: text-overflow: ellipsis
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div.geek {
white-space: nowrap;
width: 200px;
overflow: hidden;
border: 1px solid #000000;
font-size: 20px;
text-overflow: ellipsis;
}
div.geek:hover {
overflow: visible;
}
</style>
</head>
<body style="text-align: center">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>
text-overflow: ellipsis
</h2>
<div class="geek">
A Computer Science portal for geeks.
</div>
</body>
</html>
Output:
2. Word Wrap
The CSS word-wrap property defines whether the browser is allowed to line break within words when a word is too long to fit within its parent container. If a word is too long to fit within an area, it expands outside: Syntax:
element {
word-wrap: break-word;
//CSS Property
}Example:
html
<!DOCTYPE html>
<html>
<head>
<title>word wrap</title>
<style>
p {
width: 11em;
border: 1px solid #000000;
text-align: left;
font-size: 20px;
}
p.test {
word-wrap: break-word;
}
</style>
</head>
<body style="text-align: center;">
<h2>Without word-wrap</h2>
<p>
This paragraph contains a very long word:
geeksforgeeksforgeeksforgeeksforgeeks
</p>
<h2>With word-wrap</h2>
<p class="test">
This paragraph contains a very long word: geeks
forgeeksforgeeksforgeeksforgeeks
</p>
</body>
</html>
Output:
3. Word Breaking
The word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box. It specifies line breaking rules.
Syntax:
element {
word-break: keep-all | break-all;
//CSS Property
}- break-all: Breaks words at arbitrary points to prevent overflow.
- keep-all: Prevents breaking words unless there are explicit line breaks.
Example: word-break: break-all
HTML
<!DOCTYPE html>
<html>
<head>
<title>word-break: break-all</title>
<style>
p.geek {
width: 140px;
border: 1px solid #000000;
word-break: break-all;
text-align: left;
font-size: 20px;
}
</style>
</head>
<body style="text-align: center;">
<h2>word-break: break-all</h2>
<p class="geek">
A computer science portal for geeks
</p>
</body>
</html>
Output:
Example: word-break: keep-all
HTML
<!DOCTYPE html>
<html>
<head>
<title>word-break: keep-all</title>
<style>
p.geek {
width: 140px;
border: 1px solid #000000;
word-break: keep-all;
text-align: left;
font-size: 20px;
}
</style>
</head>
<body style="text-align: center;">
<h2>word-break: keep-all</h2>
<p class="geek">
A computer science portal for geeks
</p>
</body>
</html>
Output:
4. Writing Mode
The writing-mode property defines whether text is displayed horizontally (default) or vertically.
Syntax:
The writing-mode property defines whether text is displayed horizontally (default) or vertically.element {
writing-mode: horizontal-tb | vertical-rl;
//CSS Property
}- horizontal-tb: This is the default value of the property i.e text is read from left to right and top to bottom. The next horizontal line is positioned below the previous line.
- vertical-rl: In this property the text is read from right to left and top to bottom. The next vertical line is positioned to the left of the previous line.
Example: writing-mode: horizontal-tb
HTML
<!DOCTYPE html>
<html>
<head>
<title>writing-mode: horizontal-tb</title>
<style>
p.geek {
writing-mode: horizontal-tb;
font-size: 18px;
}
</style>
</head>
<body style="text-align: center;">
<h1>writing-mode: horizontal-tb</h1>
<p class="geek">
A computer science portal for geeks.
</p>
</body>
</html>
Output:
Example: writing-mode: vertical-rl
HTML
<!DOCTYPE html>
<html>
<head>
<title>writing-mode: vertical-rl</title>
<style>
span.test2 {
writing-mode: vertical-rl;
font-size: 18px;
}
</style>
</head>
<body style="text-align: center;">
<h1>writing-mode: vertical-rl</h1>
<p class="geek"></p>
<p>
computer science <span class="test2">portal </span>
for geeks.
</p>
</body>
</html>
Output:
Similar Reads
CSS Colors
CSS colors are used to set the color of different parts of a webpage, like text, background, and borders. This helps make the page look more attractive and easier to read. You can define colors using names, hex codes, RGB values, and more. You can try different formats of colors here- #content-ifram
6 min read
CSS Multiple Columns
CSS Multiple Columns is a property used to divide content into multiple columns, similar to a newspaper layout. It improves readability and organizes content efficiently across different screen sizes. Key Properties of CSS Multiple ColumnsBelow is a list of essential CSS properties for working with
6 min read
CSS Attribute Selector
CSS attribute Selector allows you to select elements based on the presence, value, or specific characteristics of their attributes. They are particularly useful for dynamic or structured content where attributes play a key role, such as in forms or data tables. Types of CSS Attribute Selectors1. [at
5 min read
CSS Units
CSS units define the size of elements, with absolute units (like px, cm) having fixed values and relative units (like em, rem, %, vh) depending on factors like the viewport or parent elements. There are two types of units: Absolute and Relative. Absolute unitsAbsolute units in CSS, such as px, cm, a
10 min read
CSS Pseudo Elements
A pseudo-element is a keyword added to a selector that lets you style specific parts of an element. For example, you can style the first line of a paragraph, add content before or after an element, or create complex effects with minimal code. Pseudo-elements are denoted by a double colon (::) (or :
5 min read
CSS Height and Width
Height and Width in CSS are used to set the height and width of boxes. Their values can be set using length, percentage, or auto. Width and HeightThe width and height properties in CSS are used to define the dimensions of an element. The values can be set in various units, such as pixels (px), centi
4 min read
CSS Layout - Horizontal & Vertical Align
The Layout in CSS is used to control the flow of element inside another element. It sets the position of element in the web page. The position of element can be set by using horizontal and vertical alignment. There are many ways to set the position of element which are listed below: Using Position P
4 min read
CSS Image Gallery
Creating a responsive image gallery is a great way to showcase a collection of pictures on your website. In this article, we'll walk you through the steps to build a responsive image gallery using HTML and CSS. This guide will help you create a beautiful gallery that looks great on all devices. Step
4 min read
CSS Variables
CSS variables (custom properties) are reusable values defined with two dashes (--) that make your CSS code efficient and easier to maintain. Store values like colors, sizes, or fonts in one place for centralized updates.Use var() to apply these variables anywhere in your CSS.Improve code readability
3 min read
CSS Website Layout
CSS website layout divides a webpage into multiple sections like header, navigation bar, content area, and footer, making it easier to organize content and build the site. 1. Header SectionThe header is the top section of a webpage, typically containing the website's name or logo. [GFGTABS] html
4 min read