So I'm working with a content editable DIV and I want to implement a smart word breaking feature like you see in most word processors, sites like Medium.com, and in the very box I'm typing this into on Stack Overflow
What I mean by smart word breaking is that if you're in the middle of typing a word and you're about to hit the end of the div then it pushes the whole word down to the next line as opposed to just breaking off the word.
Any leads on how to do this?
Thanks!
What you're referring to is 'word wrapping', where the word is 'wrapped' to the next line. This is done automatically so if you're div is not doing this then you may have a problem somewhere else. The reason this happens is because a div would word wrap normally even if it were not contenteditable so it does this by default. One way it could be disabled from wordwrapping is if you have white-space: nowrap in your CSS (more info at How to turn off word wrapping in HTML?), but this seems unlikely.
Related
I'm making a rich text editor which is like a clone of Google Docs. For reasons I won't get into here, each line in the text editor is wrapped into its own div container. For example, if there's 3 lines of text, there will be 3 child "line nodes" (rendered as an unstyled div) in the text editor. And within each line node there are inline span elements to control styling such as Bold, Italic, etc.
The issue I'm having is I can't understand why there is an unsightly vertical gap of whitespace between each line when selecting text over multiple lines. I am using Draft.js for this, but from what I can see it shouldn't make a difference; there's no styling or margins applied. I've even tried making every line div and its span elements exactly the same height but the problem persists.
My guess is this is caused by some native browser behaviour. All I really care about though is: can I "fix" it? I mean, I know it's possible because Google Docs doesn't have this spacing issue when selecting text... But then again it uses a completely custom rendering engine with custom cursors too. Thanks for any suggestions
edit: so a temporary workaround I've found (see image below) is to reduce the height of each div and span to a fixed value (in this case, height: 16.4px). But for obvious reasons, this isn't an ideal solution. I'm still looking for a "proper" way to implement whatever styling I want and not have these gaps appear between adjacent divs when selecting text
I believe your talking about line-height in which you can control the space between two elements / texts.
Try it out below:
div {
line-height:100px;
}
<div>Hello World!</div>
<div>How are ya?</div>
Thank you for all the suggestions. Turns out this is quite a challenging issue and there's very little (if anything) that can be done with pure CSS. Only the height attribute of div or span elements appear to have any visible impact on text selection. Inspecting the Google Docs elements reveals they use their own custom selection engine:
Closing this because I at least know how a solution might be implemented now, even if it would be very complex and time-consuming. Thanks again for the suggestions.
I have a div that is being rendered from a data coming from the server.
the data sometimes contains a sequance of chracters without any spacing that can be for example "xxxxxxxxxxxxxx" and "--------------------"
when these sequences are very long my div is rendered in a way that the div overcome the scroll and boundaries and looks bad.
I have tried all solution with word breadk and word wraps and so on. but the issue is that if I fix the ----------------- (with SOH sigh for example) and it is being wrapped up perfectly then the other case is not good as the letter case ("xxxxxxxxxxx....") is cutting it as well as so regular words like current will be also splitted into 2 rows.
I need a solutoion for both IE and chrome
I was able to get three div's in a row, no sweat. Where the problem lies when the site is done some pages have text in the center column, however when i start typing the text spills over into the other divs..... The text doesn't wrap (stay in that div)
I'm sure I am probably missing one little dumb thing but any help would be greatly appreciated!
I uploaded a test of it for you guys to see:
http://graves-incorporated.com/test_sites/solera_new/test3col.html
and with the text spilling onto the next div:
http://graves-incorporated.com/test_sites/solera_new/test3col_2.html
I think you worry about nothing. Words like
Stufffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffdddddddddddddddddddddddddddddfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
are not found in many languages. You will see if you put normal language in your div, the text will not overflow at all
You could always use CSS's word-wrap CSS Word-Wrap example.
Or PHP's wordwrap() function PHP Word-Wrap example.
There are various ways you can approach it, but that should set you off in the right direction :)
I Think you must use a proper language then it will not go out of Div's Width , Becase your DIV is already in a Fixed Width.Just use another the good words instead of stuuuuuuuuuuuufffffffff. It will work fine then :).
overflow: hidden will help prevent it from breaking the layout, although some content may be hidden. I would suggest word-break: break-all, but that has a tendancy to break words unnecesarily.
I am looking for a purely CSS way to center an image within a paragraph of text so the text wraps on both sides of the image.
Ideely the image |-----| would be placed
before or after |-img-| the text within
the code structure|-----| and the text
would wrap around the image.
Found an answer that works quite well available at:
http://www.alistapart.com/articles/crosscolumn/
IE10 Platform Preview supposedly (according to this article) has a new feature called positioned floats that seem to accomplish what you're looking for.
For now, though, I think you're screwed :/
I don't think it's possible:
<p> Text that goes here and image <img src="img.jpg"/> continues text</p>
As far as I know browsers treat <p>content as belonging to a line, thus when the browser parses your p-tag which contains the image it will automatically make that line as high as the image.
Maybe it's possible with css3 though...
There is currently no way to do this. I have looked far and wide.
The other answers here don't address the question as it is asked. This link (A List Apart) requires the use of two paragraphs of text, and you can't do it dynamically because you have to be careful to match up the text on both sides of the image.
The other, IE10's positioned floats (Microsoft calls them exclusions), does sort of work, but with a list of caveats:
It's IE-only.
You have to specify things like the number of columns, rather than an offset.
It doesn't work well when the window is resized. Other content gets overlapped, and the container maintains a minimum size.
I have two span tags that contain content. The first span tag will hold content from the client and the second acts like a "blipping-cursor" (I'm using JavaScript to turn its "display" style from inline to none every 500 milliseconds). Currently, everything works great except for the fact that there is a bit of spacing (just a bit in IE and a TON (one or two spaces worth) in Webkit (nested parenthesis for the win!))) between the content in the first span and the second span.
So my question is simple (well, the question, the answer may or may not be easy), how do I remove this space currently occupying the spot between span one and span two?
Here is a jsFiddle: http://jsfiddle.net/DalexL/6pZB3/
As you can see, there is a highlightable single-space in between the two spans content.
Thanks if you can!
Without seeing any code, I'm going to go out on a limb and say that you have a line break in between the two spans:
<span></span>
<span></span>
That will cause a space sometimes. If you get rid of it, the space should go away:
<span></span><span></span>