Sometimes you see writers use 3 dots/periods (...) in place of a real ellipsis (···). There’s no excuse for this in modern times. The typewriter is a thing of the past.
If you think they look the same, look again:
The ellipses (on the left) are vertically aligned in the center and have less space between the dots. The 3 dots sit directly at the bottom of the baseline, as they should since they’re just regular periods used to end sentences.
How to make a correct ellipsis:
- Mac: option + semiclon
- Windows: alt + 0133
- HTML:
…or…(identical) - Unicode:
U+2026
You can also create a custom ellipsis with CSS and control the letter-spacing (between dots), like I’ve done here on TechStacker on the <hr> element.
Custom Ellipsis in CSS:
hr {
letter-spacing: 12px;
text-align: center;
overflow: visible;
margin-top: 1rem;
margin-bottom: 1.5rem;
font-size: 34px;
display: block;
border: 0;
}
hr:after {
content: "\B7\B7\B7";
display: inline-block;
margin-left: 0.6em;
color: rgba(0, 0, 0, 0.54);
position: relative;
top: -18px;
}If you don’t want to directly style your <hr> element, just make the code above into a reuseable class:
.ellipsis {
letter-spacing: 12px;
text-align: center;
overflow: visible;
margin-top: 1rem;
margin-bottom: 1.5rem;
font-size: 34px;
display: block;
border: 0;
}
.ellipsis:after {
content: "\B7\B7\B7";
display: inline-block;
margin-left: 0.6em;
color: rgba(0, 0, 0, 0.54);
position: relative;
top: -18px;
}You probably need to adjust some property values to make it fit your specific use case, but you can use the code above as a template.
\B7 is the code for a vertically center-aligned dot (mid-dot).
Use the default font ellipsis in body text
I don’t advise that you use a custom ellipsis in regular body text, only for custom UI elements. In a regular text like you’re reading now, the specific style of the ellipsis (···) has been designed to work in harmony with the rest of the characters and symbols of that font, by the typeface designer.
