Ellipsis Text
Category: BasicSingle-line and multi-line ellipsis are essential when dealing with lengthy text. The _ell[-*] style class enables text ellipsis, supporting both single-line and multi-line ellipsis. Multi-line ellips...
Introduction
Content varies in length and container sizes differ. To prevent overflow, we need text ellipsis or ellipsis. This framework provides styles for 1-3 line text ellipsis, showing "..." at the end of the first or last line.
CSS text ellipsis relies on these properties:
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: [2~9];
Note the -webkit prefix means multi-line ellipsis only works in WebKit browsers. Testing shows all major browsers currently support these properties.
Basic Usage
Apply the _ell class (short for ellipsis) to text elements.
- Output
- HTML
-
Germany plays a central role in the European Union and is known for its precision engineering, strong industrial base, and political stability. The country has a rich history that spans from classical music and philosophy to major 20th-century events. Today, Germany is a champion of green energy, automotive excellence, and global diplomacy. Cities like Berlin and Munich combine historical depth with modern innovation.The United States has the world’s largest economy and plays a dominant role in international politics, defense, technology, and entertainment. It is a federal republic with a diverse population and a strong tradition of democracy and free enterprise. From Silicon Valley to Hollywood, the U.S. drives global trends in science, media, and culture. Its institutions, military reach, and entrepreneurial spirit shape much of the modern world.
-
Multi-line Ellipsis
Default is single-line. Append 2~9 for multi-line ellipsis (e.g. _ell-3 shows max 3 lines).
- Output
- HTML
-
Germany plays a central role in the European Union and is known for its precision engineering, strong industrial base, and political stability. The country has a rich history that spans from classical music and philosophy to major 20th-century events. Today, Germany is a champion of green energy, automotive excellence, and global diplomacy. Cities like Berlin and Munich combine historical depth with modern innovation.The United States has the world’s largest economy and plays a dominant role in international politics, defense, technology, and entertainment. It is a federal republic with a diverse population and a strong tradition of democracy and free enterprise. From Silicon Valley to Hollywood, the U.S. drives global trends in science, media, and culture. Its institutions, military reach, and entrepreneurial spirit shape much of the modern world.Germany plays a central role in the European Union and is known for its precision engineering, strong industrial base, and political stability. The country has a rich history that spans from classical music and philosophy to major 20th-century events. Today, Germany is a champion of green energy, automotive excellence, and global diplomacy. Cities like Berlin and Munich combine historical depth with modern innovation.The United States has the world’s largest economy and plays a dominant role in international politics, defense, technology, and entertainment. It is a federal republic with a diverse population and a strong tradition of democracy and free enterprise. From Silicon Valley to Hollywood, the U.S. drives global trends in science, media, and culture. Its institutions, military reach, and entrepreneurial spirit shape much of the modern world.Germany plays a central role in the European Union and is known for its precision engineering, strong industrial base, and political stability. The country has a rich history that spans from classical music and philosophy to major 20th-century events. Today, Germany is a champion of green energy, automotive excellence, and global diplomacy. Cities like Berlin and Munich combine historical depth with modern innovation.The United States has the world’s largest economy and plays a dominant role in international politics, defense, technology, and entertainment. It is a federal republic with a diverse population and a strong tradition of democracy and free enterprise. From Silicon Valley to Hollywood, the U.S. drives global trends in science, media, and culture. Its institutions, military reach, and entrepreneurial spirit shape much of the modern world.
-
With Text Blocks
Both single and multi-line ellipsis work with default font sizes. The _text[-*] classes include predefined font sizes and line heights. See text blocks for details.
- Output
- HTML
-
Germany plays a central role in the European Union and is known for its precision engineering, strong industrial base, and political stability. The country has a rich history that spans from classical music and philosophy to major 20th-century events. Today, Germany is a champion of green energy, automotive excellence, and global diplomacy. Cities like Berlin and Munich combine historical depth with modern innovation.The United States has the world’s largest economy and plays a dominant role in international politics, defense, technology, and entertainment. It is a federal republic with a diverse population and a strong tradition of democracy and free enterprise. From Silicon Valley to Hollywood, the U.S. drives global trends in science, media, and culture. Its institutions, military reach, and entrepreneurial spirit shape much of the modern world.Germany plays a central role in the European Union and is known for its precision engineering, strong industrial base, and political stability. The country has a rich history that spans from classical music and philosophy to major 20th-century events. Today, Germany is a champion of green energy, automotive excellence, and global diplomacy. Cities like Berlin and Munich combine historical depth with modern innovation.The United States has the world’s largest economy and plays a dominant role in international politics, defense, technology, and entertainment. It is a federal republic with a diverse population and a strong tradition of democracy and free enterprise. From Silicon Valley to Hollywood, the U.S. drives global trends in science, media, and culture. Its institutions, military reach, and entrepreneurial spirit shape much of the modern world.Germany plays a central role in the European Union and is known for its precision engineering, strong industrial base, and political stability. The country has a rich history that spans from classical music and philosophy to major 20th-century events. Today, Germany is a champion of green energy, automotive excellence, and global diplomacy. Cities like Berlin and Munich combine historical depth with modern innovation.The United States has the world’s largest economy and plays a dominant role in international politics, defense, technology, and entertainment. It is a federal republic with a diverse population and a strong tradition of democracy and free enterprise. From Silicon Valley to Hollywood, the U.S. drives global trends in science, media, and culture. Its institutions, military reach, and entrepreneurial spirit shape much of the modern world.Germany plays a central role in the European Union and is known for its precision engineering, strong industrial base, and political stability. The country has a rich history that spans from classical music and philosophy to major 20th-century events. Today, Germany is a champion of green energy, automotive excellence, and global diplomacy. Cities like Berlin and Munich combine historical depth with modern innovation.The United States has the world’s largest economy and plays a dominant role in international politics, defense, technology, and entertainment. It is a federal republic with a diverse population and a strong tradition of democracy and free enterprise. From Silicon Valley to Hollywood, the U.S. drives global trends in science, media, and culture. Its institutions, military reach, and entrepreneurial spirit shape much of the modern world.
-
Font Sizes and Line Heights
For paragraph text that requires ellipsis, you may append font size and line height combination class names. This framework provides two sets of multi-line ellipsis with predefined font size and line height combinations.
Heading-based
| Class Name | Font Size | Line Height | Usage | Example |
|---|---|---|---|---|
| _ell-h6 | 14px/1.4rem (h6) | 1.57 | Content summaries | <div class="_ell-h6"></div> |
| _ell-h5 | 16px/1.6rem (h5) | 1.5 | Lists | - |
| _ell-h4 | 18px/1.8rem (h4) | 1.444 | Subheadings | - |
| _ell-h3 | 24px/2.4rem (h3) | 1.417 | Section titles | - |
| _ell-h2 | 28px/2.8rem (h2) | 1.375 | Section titles | - |
| _ell-h1 | 32px/3.2rem (h1) | 1.25 | Main headings | - |
- Output
- HTML
-
h6, font-size: 14px, line-height: 1.57
Germany plays a central role in the European Union and is known for its precision engineering, strong industrial base, and political stability. The country has a rich history that spans from classical music and philosophy to major 20th-century events. Today, Germany is a champion of green energy, automotive excellence, and global diplomacy. Cities like Berlin and Munich combine historical depth with modern innovation.The United States has the world’s largest economy and plays a dominant role in international politics, defense, technology, and entertainment. It is a federal republic with a diverse population and a strong tradition of democracy and free enterprise. From Silicon Valley to Hollywood, the U.S. drives global trends in science, media, and culture. Its institutions, military reach, and entrepreneurial spirit shape much of the modern world.h5, font-size: 16px, line-height: 1.5
Germany plays a central role in the European Union and is known for its precision engineering, strong industrial base, and political stability. The country has a rich history that spans from classical music and philosophy to major 20th-century events. Today, Germany is a champion of green energy, automotive excellence, and global diplomacy. Cities like Berlin and Munich combine historical depth with modern innovation.The United States has the world’s largest economy and plays a dominant role in international politics, defense, technology, and entertainment. It is a federal republic with a diverse population and a strong tradition of democracy and free enterprise. From Silicon Valley to Hollywood, the U.S. drives global trends in science, media, and culture. Its institutions, military reach, and entrepreneurial spirit shape much of the modern world.h4, font-size: 18px, line-height: 1.444
Germany plays a central role in the European Union and is known for its precision engineering, strong industrial base, and political stability. The country has a rich history that spans from classical music and philosophy to major 20th-century events. Today, Germany is a champion of green energy, automotive excellence, and global diplomacy. Cities like Berlin and Munich combine historical depth with modern innovation.The United States has the world’s largest economy and plays a dominant role in international politics, defense, technology, and entertainment. It is a federal republic with a diverse population and a strong tradition of democracy and free enterprise. From Silicon Valley to Hollywood, the U.S. drives global trends in science, media, and culture. Its institutions, military reach, and entrepreneurial spirit shape much of the modern world.h3, font-size: 24px, line-height: 1.417
Germany plays a central role in the European Union and is known for its precision engineering, strong industrial base, and political stability. The country has a rich history that spans from classical music and philosophy to major 20th-century events. Today, Germany is a champion of green energy, automotive excellence, and global diplomacy. Cities like Berlin and Munich combine historical depth with modern innovation.The United States has the world’s largest economy and plays a dominant role in international politics, defense, technology, and entertainment. It is a federal republic with a diverse population and a strong tradition of democracy and free enterprise. From Silicon Valley to Hollywood, the U.S. drives global trends in science, media, and culture. Its institutions, military reach, and entrepreneurial spirit shape much of the modern world.h2, font-size: 28px, line-height: 1.375
Germany plays a central role in the European Union and is known for its precision engineering, strong industrial base, and political stability. The country has a rich history that spans from classical music and philosophy to major 20th-century events. Today, Germany is a champion of green energy, automotive excellence, and global diplomacy. Cities like Berlin and Munich combine historical depth with modern innovation.The United States has the world’s largest economy and plays a dominant role in international politics, defense, technology, and entertainment. It is a federal republic with a diverse population and a strong tradition of democracy and free enterprise. From Silicon Valley to Hollywood, the U.S. drives global trends in science, media, and culture. Its institutions, military reach, and entrepreneurial spirit shape much of the modern world.h1, font-size: 32px, line-height: 1.25
Germany plays a central role in the European Union and is known for its precision engineering, strong industrial base, and political stability. The country has a rich history that spans from classical music and philosophy to major 20th-century events. Today, Germany is a champion of green energy, automotive excellence, and global diplomacy. Cities like Berlin and Munich combine historical depth with modern innovation.The United States has the world’s largest economy and plays a dominant role in international politics, defense, technology, and entertainment. It is a federal republic with a diverse population and a strong tradition of democracy and free enterprise. From Silicon Valley to Hollywood, the U.S. drives global trends in science, media, and culture. Its institutions, military reach, and entrepreneurial spirit shape much of the modern world. -
Text-type based (absolute rem units)
| Class Name | Font Size | Line Height | Usage |
|---|---|---|---|
| _ell-caption | 12px/1.2rem | 18px/1.8rem | Small text |
| _ell-body | 14px/1.4rem | 24px/2.4rem | Body text |
| _ell-lead | 16px/1.6rem | 24px/2.4rem | Subheadings |
| _ell-subtitle | 18px/1.8rem | 28px/2.8rem | Medium headings |
| _ell-title | 28px/2.8rem | 40px/4rem | Large headings |
| _ell-hero | 48px/4.8rem | 60px/6rem | Extra large headings |
- Output
- HTML
-
caption, font-size: 12px, line-height: 18px
Germany plays a central role in the European Union and is known for its precision engineering, strong industrial base, and political stability. The country has a rich history that spans from classical music and philosophy to major 20th-century events. Today, Germany is a champion of green energy, automotive excellence, and global diplomacy. Cities like Berlin and Munich combine historical depth with modern innovation.The United States has the world’s largest economy and plays a dominant role in international politics, defense, technology, and entertainment. It is a federal republic with a diverse population and a strong tradition of democracy and free enterprise. From Silicon Valley to Hollywood, the U.S. drives global trends in science, media, and culture. Its institutions, military reach, and entrepreneurial spirit shape much of the modern world.body, font-size: 14px, line-height: 24px
Germany plays a central role in the European Union and is known for its precision engineering, strong industrial base, and political stability. The country has a rich history that spans from classical music and philosophy to major 20th-century events. Today, Germany is a champion of green energy, automotive excellence, and global diplomacy. Cities like Berlin and Munich combine historical depth with modern innovation.The United States has the world’s largest economy and plays a dominant role in international politics, defense, technology, and entertainment. It is a federal republic with a diverse population and a strong tradition of democracy and free enterprise. From Silicon Valley to Hollywood, the U.S. drives global trends in science, media, and culture. Its institutions, military reach, and entrepreneurial spirit shape much of the modern world.lead, font-size: 16px, line-height: 24px
Germany plays a central role in the European Union and is known for its precision engineering, strong industrial base, and political stability. The country has a rich history that spans from classical music and philosophy to major 20th-century events. Today, Germany is a champion of green energy, automotive excellence, and global diplomacy. Cities like Berlin and Munich combine historical depth with modern innovation.The United States has the world’s largest economy and plays a dominant role in international politics, defense, technology, and entertainment. It is a federal republic with a diverse population and a strong tradition of democracy and free enterprise. From Silicon Valley to Hollywood, the U.S. drives global trends in science, media, and culture. Its institutions, military reach, and entrepreneurial spirit shape much of the modern world.subtitle, font-size: 18px, line-height: 28px
Germany plays a central role in the European Union and is known for its precision engineering, strong industrial base, and political stability. The country has a rich history that spans from classical music and philosophy to major 20th-century events. Today, Germany is a champion of green energy, automotive excellence, and global diplomacy. Cities like Berlin and Munich combine historical depth with modern innovation.The United States has the world’s largest economy and plays a dominant role in international politics, defense, technology, and entertainment. It is a federal republic with a diverse population and a strong tradition of democracy and free enterprise. From Silicon Valley to Hollywood, the U.S. drives global trends in science, media, and culture. Its institutions, military reach, and entrepreneurial spirit shape much of the modern world.title, font-size: 28px, line-height: 40px
Germany plays a central role in the European Union and is known for its precision engineering, strong industrial base, and political stability. The country has a rich history that spans from classical music and philosophy to major 20th-century events. Today, Germany is a champion of green energy, automotive excellence, and global diplomacy. Cities like Berlin and Munich combine historical depth with modern innovation.The United States has the world’s largest economy and plays a dominant role in international politics, defense, technology, and entertainment. It is a federal republic with a diverse population and a strong tradition of democracy and free enterprise. From Silicon Valley to Hollywood, the U.S. drives global trends in science, media, and culture. Its institutions, military reach, and entrepreneurial spirit shape much of the modern world.huge, font-size: 48px, line-height: 60px
Germany plays a central role in the European Union and is known for its precision engineering, strong industrial base, and political stability. The country has a rich history that spans from classical music and philosophy to major 20th-century events. Today, Germany is a champion of green energy, automotive excellence, and global diplomacy. Cities like Berlin and Munich combine historical depth with modern innovation.The United States has the world’s largest economy and plays a dominant role in international politics, defense, technology, and entertainment. It is a federal republic with a diverse population and a strong tradition of democracy and free enterprise. From Silicon Valley to Hollywood, the U.S. drives global trends in science, media, and culture. Its institutions, military reach, and entrepreneurial spirit shape much of the modern world. -
Preserving Container Height
Add _ell-hold to maintain container height without collapse.
- Output
- HTML
-
Germany plays a central role in the European Union and is known for its precision engineering, strong industrial base, and political stability. The country has a rich history that spans from classical music and philosophy to major 20th-century events. Today, Germany is a champion of green energy, automotive excellence, and global diplomacy. Cities like Berlin and Munich combine historical depth with modern innovation.Germany plays a central role in the European Union and is known for its precision engineering, strong industrial base, and political stability. The country has a rich history that spans from classical music and philosophy to major 20th-century events. Today, Germany is a champion of green energy, automotive excellence, and global diplomacy. Cities like Berlin and Munich combine historical depth with modern innovation.Germany plays a central role in the European Union and is known for its precision engineering, strong industrial base, and political stability. The country has a rich history that spans from classical music and philosophy to major 20th-century events. Today, Germany is a champion of green energy, automotive excellence, and global diplomacy. Cities like Berlin and Munich combine historical depth with modern innovation.
-