Example page
I have some <span> elements which are inline-block and after the last <span> I have a <br> to break a new line (could be more than just one <br>).
The new line works on Firefox but doesn't work on Chrome (v. 24). Don't know why.
I write this so people who are searching the internet would have something to read regarding this matter, because I did not find anything on google/stackoverflow regarding this.
as soon as u add content, it works. chrome just doesn't like giving you empty space.
try adding on the empty new line.
Edit: changing since there was so much discussion on the topic.
Firefox has a bug, it should not display the newline. According to W3C standards the element "must be used only for line breaks that are actually part of the content". Without content following the <br>, it will not create this newline.
Might not be the best solution, but if you add a white space after the <br /> it works in Chrome.
<br />
Solved: http://jsbin.com/ezatoy/32/edit
By adding a ZERO WIDTH SPACE to the container element like so:
div:after{ content:'\0200B'; }
This insures that there will be some content after the last <br> occurrence, effectively breaking into a new line. no need to add/change any DOM.
Related
I've been working with contenteditable recently within a HTML5 page and encountering bugs when using it with certain elements, and I'd like to know where and how I can actually safely use it.
I've discovered that making a span element contenteditable results in some buggy behaviour in both Firefox1 and Chrome2. However, making a div or section contenteditable appears completely safe3.
A guideline a couple of people have mentioned is that only block-level elements should be made contenteditable. However, the Mozilla Developer Network lists the heading elements h1 through to h6 as block-level elements, and making a heading element contenteditable is buggy in Firefox4 and can crash the page in Chrome5.
I'd like to be able to use more than just divs and sections, but I'm not clear on what elements I can actually safely make contenteditable. By safely, I mean that using the element under normal conditions, I should be able to perform normal editing tasks without it doing unexpected or buggy things. I should be able to write in it, delete content, cut, copy, paste, and move my text cursor about and highlight text without unexpected or strange behaviour.
So, which elements can I really make contenteditable safely? Is there a specific category? Are there certain criteria the safely-contenteditable element must match?
Bug notes:
Firefox 21 w/ span: Element loses focus if the text cursor is brought to the beginning or end of the element, but not if it got there by deleting content. Highlighting part of the element, cutting and then pasting will split the element in two at that point then insert a blank element between the two parts - without actually putting the text you were trying to paste anywhere.
Chrome 27 w/ span: If the span covers multiple lines e.g. by being wordwrapped, cutting and pasting content will often insert a linebreak after the pasted content.
Unless you make the div display:inline, in which case it can still lose focus as in 1, but apparently only if you bring the text cursor to the end. I don't consider this "normal" usage of the element though.
Firefox 21 w/ heading: Selecting part of the content then cutting and pasting will, similarly to 1, split the heading element in half at that point, and insert a third heading element between the two halves. It will, at least, have your pasted content inside it, but now you have three heading elements where there was originally one.
Chrome 27 w/ heading: Select some content and cut and paste. The page crashes. You get an "Aw snap!" message. That's it.
Demo code
Here's a demo for reproducing the above. It's pretty simple, though at the moment the only thing it isn't reproducing is the lose-focus bug.
[contenteditable=true] {
border: 1px dotted #999;
}
<article style="width: 100px">
<h1 contenteditable="true">Heading</h1>
<p>
<strong>Some adjacent content</strong>
<span contenteditable="true">Span! This is long enough it will spread over multiple lines.</span>
</p>
<div style="display: inline" contenteditable="true">An inline div also with multiple lines.</div>
</article>
In my opinion, I'd say div is the safest bet across the board. Any element you wish to truly edit (be it a span, header, etc), you can place inside the div and edit as if it were just that element. Also, to account for the display:inline issue you mentioned, you could always use float:left or float:right on your editable div to give it an "inline feel" without having it actually be inline.
Hope that helps!
Since this is an evolving feature with, apparent, low priority from the browser vendors support has been sketchy and regressions not uncommon. The current state of affairs is evolving, so check the Googles, CanIUse etc and make sure support is there for your sites visitors, everything else is moot ...
Support in Firefox seems to be solid, at least for some elements, now https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content
It works well in Chrome as well as far as my testing goes.
And CanIUse looks good: http://caniuse.com/#feat=contenteditable
There are a number of different bugs related to the feature in the different browsers though, but for simple use cases it should be ok now, as of August 2016.
This is my html
<div style="width:100%;clear:both;"/>
The above empty div creates a line break in IE6 & IE7. In IE8 it is not creating any line breaks. I do not think the style of this div is the problem. I am not able to find a post related to this Stackoverflow. Please clarify or point me to the right post.
EDIT: Here's the link to the fiddle http://jsfiddle.net/spsaravanaselvan/RuvHg/. I have two textboxes for sample. In IE7 standard document mode, there is a small space between the textboxes but not in IE8.
<br/>
Is how you would normally create a line-break, closing off a div like that may not be valid as well. 'clear:both' is normally used to make sure a new element falls below floating elements, don't know why you'd use it as new line.
I have a code setup for a FAQ page like this:
<p><strong>This Is A Question</strong></p>
<p><strong>Answer.</strong> This is the content of the answer, and I am going to keep
typing until it kicks to a new line.</p>
I do notice that when this displays via the browser the new line does not align up to the start of the Answer Content. Align as in from the left. I am also aware not to expect HTML to do such a thing, must question is. What are my options on coming across "indenting" this text per se?
Any help would be greatly appreciated!
Inspired by Nicole Sullivan's css .media element, you can check out a two column solution update to your jsfiddle.
I think this is what you want:
<p><strong>This Is A Question</strong></p>
<p><strong style="float:left">Answer.</strong>
<div style="display:inline-table;float:right">This is the content of the answer, and I am going to keep typing until it kicks to a new line.</div></p>
Edit: Scratch that, it works in FF + IE, but not in chrome
Try negative padding in CSS for the div of your paragraph.
Usually work across webkit and gecko.
I was reading a book about AJAX and the writer said that one should always add a space inside of empty div tags so as to not risk compatibility problems in "some browsers".
So this would be wrong <div></div> and this would be right <div> </div>.
Question: Is he an idiot or does he know something?
Thank you.
He's not an idiot. IE 8 (possibly earlier versions as well?) will subtly mess up your layout if your empty div is really empty; adding a comment seems to be the suggested way of dealing with it, but apparently a space works as well.
i usually add instead of the empty space!
I would add a comment so that nothing is displayed. This does cause problems in ie8 for some reason!
I am trying to get a DIV element to wrap its content despite the content not having any whitespace. The content is a nucleic acid sequence, so inserting whitespace every x-characters is possible, but I'd rather do it more elegantly if possible.
e.g.
<div>TCTTGCTGCGCCTCCGCCTCCTCCTCTGCTCCGCCACCGGCTTCCTCCTCCTGAGCAGTCAGCCCGCGCGCCGGCCGGCTCCGTTATGGCGACCCGCAGCCCTGGCGTCGTGGTGAGCAGCTCGGCCTGCCGGCCCTGGCCGGTTCAGGCCCACGCGGCAGGTGGCGGCCGGGCCCTGAGGCGCGGGATCCGCAGTGCGGGCTCGGGCGGCCGGGCCCAGGGAACCCCGCAGGCGGGGGCGGCCAGTTTCCCGGGTTCGGCTTTACGTCACGCGAGGGCGGCAGGGAGGACGGAATGGCGGGGTTTGGGGTGGGTCCCTCCTCGGGGGAGCCCTGGGAAAAGAGGACTGCGTGTGGGAAGAGAAGGTGGAAATGGCGTTTTGGTTGACATGTGCCGCCTGCGAGCGTGCTGCGGGGAGGGGCCGAGGGCAGATTCGGGAATGATGGCGCGGGGTGGGGGCGTGGGGGCTTTCTCGGGAGAGGCCCTTCCCTGGAAGTTTGGGGTGCGATGGTGAGGTTCTCGGGGCACCTCTGGAGGGGCCTCGGCACGGAAAGCGACCACCTGGGAGGGCGTGTGGGGACCAGGTTTTGCCTTTAGTTTTGCACACACTGTAGTTCATCTTTATGGAGATGCTCATGGCCTCATTGAAGCCCCACTACAGCTCTGGTAGCGGTAACCATGCGTATTTGACACACGAAGGAACTAGGGAAAAGGCATTAGGTCATTTCAAGCCGAAATTCACATGTGCTAGAATCCAGATTCCATGCTGACCGATGCCCCAGGATATAGAAAATGAGAATCTGGTCCTTACCTTCAAGAACATTCTTAACCGTAATCAGCCTCTGGTATCTTAGCTCCACCCTCACTGGTTTTTTCTTGTTTGTTGAACCGGCCAAGCTGCTGGCCTCCCTCCTCAACCGTTCTGATCATGCTTGCTAAAATAGTCAAAACCCCGGCCAGTTAAATATGCTTTAGCCTGCTTTATTATGATTATTTTTGTTGTTTTGGCAATGACCTGGTTACCTGTTGTTTCTCCCACTAAAACTTTTTAAGGGCAGGAATCACCGCCGTAACTCTAGCACTTAGCACAGTA</div>
I need not support every browser. I'm mainly interested in Chrome, Safari and Firefox and other standards-compliant browsers.
CSS style like this will help:
word-wrap:break-word
Other CSS settings that control wrapping are described here.
You can use a "breaking zero-width space" (), which will break the word but will be ignored when copying into, say, notepad.