HTML ignores linebreaks when I tag nearby text

Question

I have text that I'd like to display on two lines. Adding a   tag accomplishes that:

<!-- Browser displays two lines of text, as intended -->
<a>Text unit 1<br>
   Text unit 2 </a>

I would like to apply styling to 'Text unit 2'. No matter what tag I apply to the text, the browser ignores the   as soon as I introduce it:

<!-- Browser displays one line of text, not as intended -->
<a>Text unit 1<br>
   <literally any HTML tag>Text unit 2</tag></a>

I've tried , , <div>, , and  tags. All of them display as a single line instead of two lines as soon as the tags are introduced.

How do I force the   tag to implement a line break?

Edit: Firefox 85 and Chromium 87.0

Your example works fine for me, rendering on multiple lines. Do you have a stylesheet that's causing different behavior? Is your markup valid? — ray, Mar 02 '21 at 18:10
I've FF 86 and it works fine in it. Can you post a screenshot? — Sagar V, Mar 02 '21 at 18:11
Does this answer your question? [
not working in Firefox](https://stackoverflow.com/questions/10500551/br-not-working-in-firefox) — iamdhavalparmar, Mar 02 '21 at 18:14
@rayhatfield I have a stylesheet, but there's nothing I can figure would affect this, except maybe that it's in a Flexbox cell. Everything works without tags on 'Text unit 2', so I think the markup is valid. — Darien Marks, Mar 02 '21 at 18:24
If the `` itself is `display: flex` then the `
` element itself becomes a flex element and will be laid out according to flex rules. You'd end up with a flex layout that looks like this: `| text 1 |
| text 2 |` with everything laid out in a row. — ray, Mar 02 '21 at 18:52
@rayhatfield The `` itself actually is a `display: flex` element, because it was the only way I could get the text to center vertically. Evidently, the `
` only becomes a flex element if there's a second element present. Otherwise, it's recognized as a regular line break. I'll play around with solutions, thanks. — Darien Marks, Mar 02 '21 at 18:59

score 1 · Accepted Answer · answered Mar 02 '21 at 18:58

If the <a> itself is display: flex then the   element itself becomes a flex element and will be laid out according to flex rules. You'd end up with a flex layout that looks like this: | text 1 | | text 2 | with everything laid out in a row:

a {
  display: flex;
}

<a>Text unit 1<br><div>Text unit 2</div></a>

You could clean this up by making each child an element and setting flex-direction to column:

a {
  display: flex;
  flex-direction: column;
}

<a>
  <div>Text unit 1</div>
  <div>Text unit 2</div>
</a>

But if that's all you're doing you don't need flex at all:

<a>
  <div>Text unit 1</div>
  <div>Text unit 2</div>
</a>

`flex-direction: column;` is precisely what I needed. Thanks! — Darien Marks, Mar 02 '21 at 19:03

HTML ignores linebreaks when I tag nearby text

1 Answers1