Styling an inline element with linebreak (after) within a content editable element - caret position

Question

I'm styling an inline element within a contenteditable element to visually represent a linebreak.

First text(Linebreak)
[C]Second Line

I want to be able to place the cursor at [C] position which I'm unable to. I believe there's a reasonable explanation for the current behavior. Anyone care to explain and maybe provide me a different approach?

EDIT: Apparently it works for IE and Firefox but not Chrome.

.lb{
  display:inline;
}

.lb:after{
  content: "\21B2\A";
  white-space: pre;
  word-wrap: break-word;
}
.edit-box{
  border: 1px solid black;
  padding: 10px;
}

<div id="test" contenteditable="true" class="edit-box">
  How to style the span element<span class="lb"></span>so it's possible to place the cursor at the beginning of this line, before "S".
</div>

Possible duplicate of [How to set caret(cursor) position in contenteditable element (div)?](http://stackoverflow.com/questions/6249095/how-to-set-caretcursor-position-in-contenteditable-element-div) — ksav, Nov 21 '16 at 13:35
@ksav I want to place the cursor manually, not through javascript. — pelican_george, Nov 21 '16 at 13:47
In the snippet you provided - it is possible to place cursor where you request. — kwicher, Nov 21 '16 at 14:04
@kwicher Which browser are you using ? I can't do it with Chrome. IE seems to be possible tho. — pelican_george, Nov 21 '16 at 14:05
I think your `content: "\21B2\A";` is cusing the problem in Chrome — kwicher, Nov 21 '16 at 14:08

ksav · Answer 1 · 2016-11-21T14:57:18.777

0

You could wrap each new line in a <p>.

.edit-box {
  border: 1px solid black;
  padding: 10px;
}
.edit-box p {
  margin: 0
}
p:not(:last-child):after {
  content: "\21B2";
}

<div id="test" contenteditable="true" class="edit-box">
  <p>How to style the span element</p>
  <p>so it's possible to place the cursor at the beginning of this line, before "S".</p>
</div>

Or wrap that 2nd line in a span that displays as a block:

.edit-box {
  border: 1px solid black;
  padding: 10px;
}
.edit-box span {
  display: block;
}

<div id="test" contenteditable="true" class="edit-box">
  How to style the span element
  <span>so it's possible to place the cursor at the beginning of this line, before "S".</span>
</div>

edited Nov 21 '16 at 14:57

answered Nov 21 '16 at 13:56

ksav

20,015
6
46
66

1st option, if I remove the paragraph tags and just place a
I can achieve the same. But I want to visually show the linebreaks with the unicode character "21B2". Also your second option requires more javascript handling to achieve what you propose. The only thing I'm doing at the moment code wise, is capturing keypress events and preventing the default behavior for new lines, inserting "" instead. – pelican_george Nov 21 '16 at 14:22
I see. I have edited the first option to add `\21B2` after each `
` that is not the last.
– ksav Nov 21 '16 at 14:51
1

so far, your first option is the most appealing. I will mark it as answered in 1 day if no other solutions arise. thanks. – pelican_george Nov 22 '16 at 10:33

score 0 · Accepted Answer · answered Nov 21 '16 at 14:08

0

Try the follow css changes in your lb classes with addition of .lb:before:

.lb{
  display:inline;
  white-space: nowrap;
}

.lb:before{
  content:'';
  display:block;
}

.lb:after{
  content: "\21B2\A";
}

This will achieve what you want. What we are doing is that we are telling the main lb to not wrap the text in and around it. Next we create lb before as block to get it into new line and then a lb after to add the cursor and the rest of the text flows along with it. Hope this helps.

answered Nov 21 '16 at 14:08

Nasir T

2,603
1
9
15

Its working for me. Check this screenshot: http://screencast.com/t/DnBY5sEWds. Working in codepen for me as well. Check here: http://codepen.io/Nasir_T/pen/gLmWzy – Nasir T Nov 21 '16 at 14:15
The cursor should be just before "so" and the second line. Also, the "new line" unicode character should be at the end of the previous line. – pelican_george Nov 21 '16 at 14:17
No it does not on Firefox OSX, THe new line chracter is in the second line – kwicher Nov 21 '16 at 14:19
@kwicher With your proposal, yes I agree that it's on the second line. However, I want it to be at the end of the first line. If you run my original code snippet, is it shown on the second line ? – pelican_george Nov 21 '16 at 14:23
Ok i think i mis- interpreted the new line character as what you wanted at the start of the second line. Let me get back to you on this. – Nasir T Nov 21 '16 at 14:24
@NasirT I've reused your suggestion and used
instead. Works fine. – pelican_george Nov 24 '16 at 13:07

score 0 · Answer 3 · answered Nov 23 '16 at 09:15

I've come up with a different approach by wrapping the BR element with a span as such:

.edit-box{
  border: 1px solid black;
  padding: 10px;
}

.icon{
  width:15px;  
}
.icon::before{
    content: "\21B2";
}

<div id="test" contenteditable="true" class="edit-box">
  How to style the span element so it's possible to place the cursor<span class="icon"><br></span> at the beginning of this line, before "at".
</div>

Basically, the linebreak sort of receives a visual dimension and keeps its regular behavior.

For the specific contenteditable element, I capture all keypress events for the return key and paste <span class="icon"><br></span>, preventing the default behavior.

score -1 · Answer 4 · answered Nov 21 '16 at 14:41

-1

It seems to work when you wrap your "second line" in div: https://jsfiddle.net/n944cfgo/2/

answered Nov 21 '16 at 14:41

kwicher

2,092
1
19
28

Styling an inline element with linebreak (after) within a content editable element - caret position

4 Answers4