So basically this is my problem i have a div that gets its value from a <textarea> just like here on Stack Overflow but if I make it into big characters or small the characters won't break to a new line -- they go outside of the <div>. is there a easy and good way to resolve this?
Use the following CSS on your element:
word-wrap: break-word;
You can use word-wrap.
Example: http://jsfiddle.net/7vDbp/
Usage notes: http://caniuse.com/#search=word-wrap
Alternately, you can insert the <wbr/> tag into your markup at desired word breaks.
Example: http://jsfiddle.net/Wz8jp/
Related
how i can solve that problem?:
My problem
if I put a spaced text there is no problem, but otherwise...
Im using materializecss if it can help :)
Try this in your CSS tag for the element in question: word-wrap: break-word;
Answer from: Brad Colacino
As Brad mentioned, the reason why your text flies off the div is because the long single line counts as a single word. By default, lines are divided by spaces and other non-word delimiters.
To fix this case where a long word runs off the screen, use this:
div {
word-wrap: break-word;
}
This will tell the browser to divide the word at the point where it runs off the div (assuming it is a div) and start a new line continuing where the word was cut off like :
abcdef
ghijk...
EDIT: If you are using CSS3, there is also word-break
I have a string that is causing a large gap in my text as it is not wrapping. I'm guessing the default wrapping for Chrome is by word. Any clues on how to solve this?
You can use CSS to solve this. Just add word-break to the css of the containing html and select the desired behavior.
Syntax
word-break: normal|break-all|keep-all;
Value Description
normal Break words according to their usual rules
break-all Lines may break between any two letters
keep-all Breaks are prohibited between pairs of letters
This answer came from W3Schools http://www.w3schools.com/cssref/css3_pr_word-break.asp
I need your help with image display inside comment box. When ever characters of the comments exceeds a certain number instead of it to wrap round the image to the left, it actually gives the appearance in the picture below. How can I fix this?
#comment img.floatright {
float:right;
padding: 1px;
clear:left;
}
IMAGE
I would personally set the text inside a <div> and define a width, but if you don't want to do that you could create a PHP function to insert <wbr> tags whenever there is a long word. The tag will only break up the word when needed so you can implement multiple tags in a word.
Example:
http://jsfiddle.net/6rBUZ/
Another option would be add the following style to the content that you want to wrap:
word-wrap: break-word;
overflow: hidden;
The word-wrap setting will allow the word to be wrapped despite its length. The overflow setting will cause it to be cut off at the end of the available space in browsers which don't recognize word-wrap.
Example: http://jsfiddle.net/Redsz/pBSDd/1/
I have a comment section which is of a certain width. When I post a long URL, this text is overlapping as there is no spaces in between. How to fix this in HTML
As far as I know there's no HTML way to do this. Since it's display/design related you can use CSS:
overflow: hidden;
This might work too:
word-wrap: break-word;
Overflow & Word-wrap links.
Edit: overflow: hidden will hide the text that extends beyond the size of its container and word-wrap: break-word should force a break in the word.
You have a few options. You could amend your comment system server-side so that it automatically puts in a line break if a word is over a certain length.
Or, you could set the CSS style overflow to hidden, scroll, or something like that to prevent the containing DIV of the comment from being stretched - that could do the trick too.
There is no solution in pure HTML. If you can use JavaScript or AJAX, you can convert the URL into a real link and replace the text part with only the first 20-30 characters of the URL: http://some.com/a...
Yes, so I got the problem that if you type a long sentence with no space e.g eeeeeeeeeeeeeeeeeeeeeeee, it will break itself, but then now I would need to start typing some ugly non-breaking coding.
Example:
http://jsfiddle.net/r3CFJ/
I need to have everything in one sentence in order not to make it break itself. Check here to see the result of not having everything in one sentence:
http://jsfiddle.net/r3CFJ/1/
How can I fix this please any solutions?? as my further coding will get very ugly and not readable?
You are getting this spacing because of the CSS, I am not sure why you add the pre type formatting and then wonder why it shows 'exactly' what you do (multiple lines, etc).
If you remove the CSS it looks just fine on 1 line.
Look: http://jsfiddle.net/r3CFJ/10/
Here's the problem, the white-space property in CSS forces new lines to break for all values except "normal" and "nobreak". There is no value for this property that will allow you to wrap lines while no breaking on new lines in the code. Don't like it? Get the W3C to add another value and get the major browsers to adopt the rule.
You don't want your entire div to be subject to a property set to such a value since you don't want new lines to break within the div. You do want elements inside your div to be subject to such a property. Wrap all the text in anchor element tags and apply the CSS to the elements that will require wrapping.
Here's a modification of your example working as expected. (Assuming no forced breaking due to line breaks in code but wrapping of long lines)
If you want the image and text will be inline set a or fancybox_vid to be position:absolute;
Example http://jsfiddle.net/huhu/r3CFJ/30/