← #64 Write CSS rules for Firefox only
#65

Show the first letter only

Topics: CSS

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

MondayTuesdayWednesdayThursdayFridaySaturdaySunday
1234567
891011121314
15161718192021
22232425262728
2930
Fix a typo or suggest an improvement
#66 Do not use submit to name a submit button