I have a lengthy subtitle that includes the following:
Self-discovery | Personal development | Health prevention
This is how it appears in HTML:
<h2>Self-discovery <span class="divider"> | </span> Personal development <span class="divider"> | </span> Health prevention</h2>
On screens less than 768px wide, I hide the "|" using this CSS:
@media only screen and (max-width: 769px) {
.header-description .divider {
display: none;
}
}
However, on screens under 1024 pixels, the first two words are on one line and the last word is on another line like this:
Self-discovery Personal development
Health prevention
which doesn't look very visually appealing.
QUESTION:
Is there a way to use a <br> tag instead of the SPAN tag for screens under 1024 pixels?
OR
Can I instruct HTML to put each word on a new line on screens narrower than 768 pixels?
Essentially, I would like each word to appear on a separate line like so:
Self-discovery
Personal development
Health prevention