Styling a linebreak (
) inline with the text

Question

Is it possible to style and position a line break right after a text node inline?

For example:

br {
    position:relative;
    display: block;
    border: 1px dotted green;
    font-size: 8px;
    line-height: 8px;
    height: 8px;
    background: yellow;  
    color: blue;
    content: "A";
    width: 5px;
}

<pre><div contenteditable="true">
some<BR />text with<BR />linebreaks.<BR />The intended result<BR />is to style the linbreak<BR />right after the sentence.<BR />
   </div>
 </pre>

The result from this code snippet almost achieves what I'm looking for, but it positions the visual representation of the line break on the next line.

The intended result is:

some"linebreak visual representation"
text with"linebreak visual representation"
linebreaks"linebreak visual representation"
The intended result"linebreak visual representation"
is to style the linebreak.."linebreak visual representation"

EDIT: A fiddle

`
` is an XML-ism, and unspecified in HTML. Though allowed, it does nothing and browsers are instructed to ignore it. — Rob, Nov 09 '16 at 18:00

score 3 · Accepted Answer · edited May 23 '17 at 11:48

This works with Chrome (other browsers not tested)...

br {
  display: inline;
  border: 1px dotted green;
  font-size: 8px;
  line-height: 8px;
  height: 8px;
  background: yellow;
  color: blue;
  content: "A";
  width: 15px;
}
br:after {
  content: " Hello! \a";
  white-space: pre;
}

<div contenteditable="true">some<BR />text with<BR />linebreaks.<BR />The intended result<BR />is to style the linbreak<BR />right after the sentence.<BR />
  </div>

But I strongly suggest you to read this Török's answer, it seems there is no way to customize the br tag for all browsers. The reason is that this element has no content, it * generates a line-break and it is only a line-break*. There are only few styles that make sense to apply on it, like clear or position. You can set BR's border but you won't see it as it has no visual dimension.

You'd better use something as the hr tag to achieve what you need.

Add a comment as it seems imposible now to have a cross-browser solution. — Al Foиce ѫ, Oct 27 '16 at 13:43

score 1 · Answer 2 · answered Oct 27 '16 at 07:48

1

Hey br should be display: inline-block;

br {
    position:relative;
    display: inline-block;
    border: 1px dotted green;
    font-size: 8px;
    line-height: 8px;
    height: 8px;
    background: yellow;  
    color: blue;
    content: "A";
    width: 5px;
}

<pre><div contenteditable="true">
some<BR />text with<BR />linebreaks.<BR />The intended result<BR />is to style the linbreak<BR />right after the sentence.<BR />
   </div>
 </pre>

answered Oct 27 '16 at 07:48

Arun

1,177
9
15

I wasn't clear in my question maybe. I would still want for the lines to have layout line breaks. – pelican_george Oct 27 '16 at 07:53
Oh.. I actually just tried your code snippet with IE and it worked, but not with Chrome. – pelican_george Oct 27 '16 at 08:17

score 1 · Answer 3 · edited Nov 09 '16 at 17:56

1

Sure you can do that by adding display:inline-block property to your css. However, if you want only some <br> tags to have this ability you can add a class and assign the inline-block property to that class. That way you can combine two <br> tags, one with class and one without to get a new line and visible line breaks.

edited Nov 09 '16 at 17:56

Mr Lister

45,515
15
108
150

answered Oct 27 '16 at 08:20

Hassaan

1,561
1
9
15

I would like to avoid having 2 linebreaks, defeats the purpose of the contenteditable, I would have to handle through javascript each linebreak delete. – pelican_george Oct 27 '16 at 09:00

Styling a linebreak () inline with the text

3 Answers3

Styling a linebreak (
) inline with the text