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
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'm using a <pre> tag in my design. The thing is my pre even breaks the words at the end of the line. Say I'm at the end of the line and if there is a large word then it breaks it. For example at the end of the line we have a large word say STACKOVERFLOW.
So my pre tag display the word STACKOVERFLOW as:
STAC
KOVERFLOW
Where as it should show the whole word in the new line.
Following is my code for pre tag:
pre{
white-space: pre-wrap;
word-wrap: break-word;
}
Following is my HTML Code:
<div uib-carousel active="active" class="text-primary">
<div uib-slide index="$index" class="uibSlider" ng-repeat='summary in desc'>
<pre class="text-justify">{{summary.info}}</pre>
</div>
</div>
See the w3 specification for the word-wrap property:
‘break-word’
An unbreakable "word" may be broken at an arbitrary point if there are no otherwise-acceptable break points in the line. Shaping characters are still shaped as if the word were not broken, and grapheme clusters must together stay as one unit. No hyphenation character is inserted at the break point.
Because you're using the 'break-word' rule, this means that your long words will be broken if there is no width left in the container and if there are no other more acceptable break points.
Instead try using the 'normal' rule:
‘normal’
Lines may break only at allowed break points. However, the restrictions introduced by ‘word-break: keep-all’ may be relaxed to match ‘word-break: normal’ if there are no otherwise-acceptable break points in the line.
break-word means that you want the word to break.
Does the following work for you?
pre {
white-space: pre-wrap;
}
I have a box with a width of 118px which contains an email address. I use word-wrap: break-word; to wrap the addresses better. But on a special kind of addresses this makes it worse.
big.ass.email#addre
ss-
is.extremely.lame.de
Because of word-wrap: break-word; it breaks after "addre" but ceause the rest of the address doesn't fit in one line it breaks again at a "prefered breakpoint" which happens to be the "-". In desired behaviour the second break in the email address would not be after "-" but after "extremely". I fear that's not possible with just CSS. Isn't it?
Here you can see a small example: http://jsfiddle.net/sbg8G/2/
Your best bet here would be to use <WBR> tag or character to introduce a soft-break wherever you wish. e.g.:
Demo: http://jsfiddle.net/abhitalks/sbg8G/15/
HTML:
...
<a href="big.ass.email#address-is.extremely.lame.de">
big.ass.email#address-is.extremely.lame.de
</a>
...
Here, is inserted after the "#" and after "-is" to cause a break at those points.
Important: word-wrap and word-break won't help you here.
Reason:
word-break is meant for CJK (Chinese, Japanse, Korean) texts. (Reference). Its main purpose is to prevent word breaks for CJK text. Rest is normal.
word-wrap is used to specify whether or not the browser may break lines within words in order to prevent overflow. That's it. (Reference) The main thing to notice is that "..normally unbreakable words may be broken at arbitrary points.. ". Arbitrary points don't give you much control, do they?
Hard-hyphens help to indicate the break points. You have a hyphen in your email address and that gives a hint to break word there.
Note:
A better alternative would be have CSS3 do it for us. word-wrap and word-break doesn't allow control of break points. hyphens does, but, unfortunately hyphens still "is an experimental technology".
Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens
hyphens should be able to do the trick along with:
hyphenate-limit-lines
hyphenate-limit-zone
hyphenate-character
hyphenate-limit-before
But, this doesn't work currently as it should. Otherwise, a would have helped you out.
Note 2:
hyphens, would add a "hard hyphen" (-) which would cause unintended results in your case (the email address would change).
Credits: here, here, and here
Hello I have a similar issue and I solve it with:
overflow-wrap: break-word;
word-wrap: break-word;
Also you could check this:
Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc
You can try using text-overflow:ellipsis;
overflow:hidden;
text-overflow:ellipsis;
http://jsfiddle.net/sbg8G/8/
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/
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/