I'm using contenteditable="true" to edit a div with white-space: pre-line and found that the formatting is not being honored. It simply collapse all white spaces. Is there a way to make this happen?
Line 1
Line 2
Becomes
Line1 Line2
Which is not good since user is not able to see what they are editing. I understand there is an issue with extra being introduce for every enter key, but that one is easier to handle once it's displayed correctly.
Related
I display a piece of text taken from a text file in an HTML page, I want the new-lines in that text file to be taken into account so I am using "white-space: pre;". on the other hand, I want to prevent the text from overflowing outside its containing div, so I added "word-wrap: break-word;"
unfortunately, the two properties don't seem to work together (the white-space overrides the word-wrap). how can I make it so both properties work together?
According to the MDN doc page, this is the desired behavior for the white-space property:
pre
Sequences of whitespace are preserved. Lines are only broken at newline characters in the source and at <br> elements.
pre-wrap
Sequences of whitespace are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
So, to obtain what you described, you need to use the value pre-wrap in place of pre.
Here's the live site: http://chadfraser.com/
As you can see, if you look on mobile or scale your browser window, the words break in strange places. I could add hyphens, except my client is a professional writer and doesn't want them. We shouldn't need them though - I can't figure out why the words won't just wrap with the white space.
Any thoughts would be appreciated.
Its because your code is assigning word-wrap: break-word; It causes the word to break in half if necessary.
Most precisely, it is been set in styles.css on line 51:
body {
word-wrap: break-word;
...
So, your entire document will behave like this. Set the property to word-wrap: normal on the elements you don't want to break, or just remove this property from the body
I often have an image that I wrap text around, and sometimes the texts wraps awkwardly, like so:
In the HTML, the image is floated to the left and the text simply follows:
<p><img style="float:left;" src="/images/[image]" /></p>
<p>This is my David Copperfield, <em>I was born</em> kind of bio. For a more concise one, please see the press kit.</p>
...
This mostly works, except when the text length just happens to run past the bottom of the image and flow back to the left margin, and when the amount of text isn't long enough to fill more than one line (in this case, it's only one word). When that happens, it looks really bad.
So, is there a way to control the text flow so that this doesn't happen?
What you could do is add overflow: hidden to the p tags where there is text. This will make it so any text that wraps after the image will be in line with the larger part. Now when you have large paragraphs this may look funny, however if your paragraphs are all fairly short this should help.
Example: http://jsfiddle.net/8ZsKy/2/
alternately you could just add a class rule and apply it to potential "problem" paragraphs.
p.wrap-inline {
overflow:hidden;
}
EDIT: updated jsfiddle (oops)
This question actually had me thinking although it is actually annoying sometimes, In the past i have fixed similar problems to this by adjusting the line height a little,
line-height:20px;
or adjusting the actual size of the image a little bigger or smaller,
<img style="float:left;" src="/images/[image]" width="100" height="200" />
or alter the tracking of the text
letter-spacing: 0.1em;
or use hyphenation (I don't like it or recommend it)
hyphens: auto;
However as far as my knowledge goes i do not know of any css rules to eliminate text orphans. There might be scripts but i have never heard of it and have doen a bit of research on it a while back. Hope it helped :)
This is how floating works. If you don’t want that, don’t use float; you can e.g. use positioning instead, so that the text appears as a block on the right of the image.
There’s unfortunately no way to use floating and request e.g. that the last line should not be short. You can prevent the very last word from appearing on a line of its own by using a no-break space between it and the preceding word, e.g. it will. And you could extend this to a group of short words. But this would just mean that the group appears on a line of its own and the preceding line is correspondingly shorter (and may therefore look odd).
If the text is just a little too long, you could modify its rendering to take less space vertically e.g. by removing empty lines between paragraphs, though this would be a major layout change (though perhaps a good one):
p { margin: 0 }
p + p { text-indent: 1.3em; }
<img style="float:left; clear="both" src="/images/[image]" />
I have a link at the very end of 4 paragraphs. Something like:
Here is my text, and it's just an example of text to show
And I am wanting to wrap the last bit of text, which happens
to be a link, but I need the link to either stay on the line
that is the available width and not break to another line,
unless it can't fit left-aligned on that line like this
http://mylink.com
So, the actual code for this would be as follows in HTML:
<p>Here is my text, and it's just an example of text to show
And I am wanting to wrap the last bit of text, which happens
to be a link, but I need the link to either stay on the line
that is the available width and not break to another line,
unless it can't fit left-aligned on that line like this<br />
http://mylink.com</p>
I am using <br /> here, but I don't want to use <br /> because the screen captures how much text actually shows and sometimes it could look like this:
Here is my text, and it's just an example of text to show And I am wanting to wrap
the last bit of text, which happens to be a link, but I need the link to either stay
on the line that is the available width and not break to another line, unless it can't
fit left-aligned on that line like this
http://mylink.com
So, in a situation like above, I would need it to not use a <br /> tag to break it up and it should render like this instead:
Here is my text, and it's just an example of text to show And I am wanting to wrap
the last bit of text, which happens to be a link, but I need the link to either stay
on the line that is the available width and not break to another line, unless it can't
fit left-aligned on that line like this http://mylink.com
Is this possible to do via CSS? Some text-align value perhaps, or something else in order to accomplish this without using <br /> tags at all? But if the link can fit on the line naturally, than it shouldn't move to the next line down. Instead it should stay on that line.
Thanks!
Some browsers interpret the slash in your URL as a character it is allowed to break your word on, while others will not. All you should need to do is adjust the white-space property of the link
http://jsfiddle.net/Msc4S/
a {
white-space: pre;
}
Use this html as you want:
<p>Here is my text, and it's just an example of text to show
And I am wanting to wrap the last bit of text, which happens
to be a link, but I need the link to either stay on the line
that is the available width and not break to another line,
unless it can't fit left-aligned on that line like this
http://mylink.com</p>
But add this into the CSS.
a {
display: block;
}
However this will make a on the new line everywhere, so you have to specify it more with this CSS
p a {
display: block;
}
Here is the jsfiddle example http://jsfiddle.net/vzmtB/ (without using p a) and http://jsfiddle.net/vzmtB/1/ (with using p a).
I think the default word-wrap without break does this already. when some thing doesn't fit in line It moves to next line, but If it can be fit then it doesn't move to next line. You need to have a defined width of parent element, in which text gonna be fit. check this fiddle.
nothing you need to do in css.
I have a system similar to BB code whereby text within two tags is converted into a link which when hovered over produces an line image.
The problem is that sometimes if the phrase is long the text wraps onto the next line. When this occur the image is displayed above the text on the preceeding line and doesn't look right. Because of this I want to ensure that if the text is going to wrap, it instead breaks to a new line.
I'm happy with any CSS3 only solutions to this.
Thanks
give your a css display: inline-block. Inline block doesn't allow breaking within the block and therefore moves to the next line.
a {
display: inline-block;
}