0

In a div content editable, when highlighting, I can't see the thickness of the BR just like this: enter image description here

I want it to be like this in MS Word

enter image description here

(Updated: Typo earlier -- wrong syntax as pointed out) By the way, the <BR> is enclosed like this

<div contenteditable='true'>
  <div>
    <span><br/></span>
  </div>
</div>

Should I use CSS to set BR's thickness? or there's another way? Please shed some light.Thanks!

Desu
  • 840
  • 1
  • 11
  • 17
  • 2
    `` should be `
    `. your tag is invalid     – Lelio Faieta Feb 28 '17 at 11:42
  • 1
    See [here](https://jsfiddle.net/u2er71gm/), you don't have anything to hilight because there isn't any character. MSWord put blank space when you press enter/br – Dwhitz Feb 28 '17 at 11:47
  • Browsers don't necessarily render things the same as MS Word. As far as I know, you can't "style" a `br`. See http://stackoverflow.com/questions/899252/can-you-target-br-with-css – domsson Feb 28 '17 at 11:50
  • 1
    what is the purpose of this? If you want to add some distance below a text line, why don't you just add a `margin-bottom`? – Johannes Feb 28 '17 at 11:52
  • I just want that visual feed back that a line break/ new line is highlighted... – Desu Feb 28 '17 at 11:54
  • If my answer works, please @Desu give me "Best Answer" thanks. – Dwhitz Feb 28 '17 at 12:06
  • @Dhn marked. thanks for the help – Desu Feb 28 '17 at 12:10
  • If you want visual feedback, how about line numbers or some other kind of line markings on the left hand side of the editable text field? – domsson Feb 28 '17 at 12:13

1 Answers1

1

Put &nbsp; after <br> tag.

<div contenteditable='true'>
<div>
<h4>test 1</h4>
<span>test
<br/>
<br/>
test
</span>
</div>

<div>
<h4>test 2 </h4>
<span>test
<br>
&nbsp;
<br>
test
</span>
</div>

<div>
<h4>test 3</h4>
<span>test
<br/>
&nbsp;
<br/>
test
</span>
</div>
</div>

UPDATE :

This works, because just like MSWord, you should put white space for a new line (&nbsp; for HTML). So you can highlight the text and see the new lines.

Dwhitz
  • 1,250
  • 7
  • 26
  • 38