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
Related
By default , it there's a long word at the end of a line which cannot fit in the remaining space , it's automatically shifted to a new line.
This property is used in such cases to make break the word letting it take the remaining space as much it can before shifting rest part of the long word to another line.
(At least from what I understood).
I gave this property a try but it doesn't seem to work well for some reason.
div {
overflow-wrap: break-word;
hyphens: auto;
width: 100%;
}
<div>
This is the first time I've seen the word Pneumonoultramicroscopicsilicovolcanoconiosis. It's a long one
</div>
The longer word in my example instead of breaking down just normally shifts to new line ignoring this property.
After a little bit of googling, I found a property which works similarly: word-wrap: break-word;. So I replaced overflow wrap with it. It didn't work so I kept both of them together, but that still didn't worked.
To better understand my question ( if according to you my output is fine ) then please check this
Edit - my issue is fixed but the explanation i had given for this property above is wrong
The old name of this property is word-wrap
And this being a property with new name , i wouldn't anyone to get wrong info through my question
so here's a correct example and explaination of what this property does which i wrote - https://del.dog/qeraracita.coffeescript
The example you are using as your "proper break" from CSS-Tricks (https://css-tricks.com/almanac/properties/o/overflow-wrap/) has a non breaking space between 'Word' and the long word, making it a single word to break up, hence the difference you see between where the word breaks in your code and the example.
<p>This is the first time I've seen the word Pneumonoultramicroscopicsilicovolcanoconiosis. It's a long one.</p>
remove that extra non breaking space and the word break happens how it does in your demo. https://codepen.io/rlemon/pen/MWgxXmK
so to solve your problem, add back in the non breaking space and let it treat those two words as one.
First of all, you're applying these properties to all elements with the.div class, not the div element itself. Remove the dot ('.') on the CSS selector.
If it still doesn't work, use the HTML entitie . Its an hypen that doesn't appear until the word is broken. This is great, so you can tell the browser where it should break (same as <wbr>, but with hypen).
Example:
<div>
This is the first time I've seen the word
ultramicroscopicsilicovolcanoconiosis. It's a long one.
</div>
Hope this helps!
I'm not seeing the unexpected behavior.
Here is a Codepen demonstrating overflow-wrap.
HTML
<div>
<p>This is the first time I've seen the word Pneumonoultramicroscopicsilicovolcanoconiosis. It's a long one</p>
<div>
CSS
div {
max-width: 100px;
border: 1px solid red;
}
p {
overflow-wrap: break-word;
}
I have a problem with wrapping and truncating long text in Angular. I want to wrap text in 2 lines and add "..." at the end of the second line if it is longer than 2 lines. I cannot use pure css, because my text couldn't be justify, it should be aligned left. It also should works in Firefox, so I cannot use -webkit-line-clamp. Container of my text and my text as well should be responsive.
Any suggestions how to deal with it in Angular 7?
In Angular you can write an ng-if statement to check the length of the value and if it's greater than a certain number then add ellipses.
<span ng-if="textValue.length > 100" class="ng-scope">...</span>
For wrapping you can use:
word-wrap: break-word;
overflow-wrap: break-word;
See this CSS-Tricks article for more information
https://css-tricks.com/almanac/properties/o/overflow-wrap/
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
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/
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...