Show the first letter only
There are cases that we would like to populate the full text in generated HTML, but only the first letter is displayed.
The remaining characters are hidden visually. It's usesful when we have to support a smaller screen, for example.
The trick here is to set zero font size for the element, whereas the first letter has a normal font size.
.element {
font-size: 0;
}
.element::first-letter {
font-size: 1.5rem;
}
Demo
Show the first letter only