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/
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;
}
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 div that contains a text. I want my text to be displayed on several lines when it is very long but without cutting the last word of each line. for example if the last word of a line i is foobar, I want this word to be displayed in a new line if the size is not enough instead of displaying foo in this line and bar in the next line.
for this purpose I tried:
div{
word-break: break-all;
}
also
div{
word-wrap:break-word;
}
but it does not work
I am not sure to understand what you exactly want to do here.
Indeed :
word-wrap:break-word; will break very long word onto two lines (words that are longer than the width of your div)
and word-break: break-all; will break your words at any point (read at any letter) when it arrives at the end of a div
word-wrap: normal; may actually be what you want, but that's the default value of the property
All,
I have a text field that when it gets too full the line goes to the next line instead of extending horizontally.
On the right side of the following webpage you can type in an email address and make it long and the text wraps instead of going horizontally. Does anyone have any idea why it would be doing this? Is it something in my CSS? I inspected the element but didn't see anything that would be causing it.
Here is the URL:
http://tinyurl.com/bolsrcx
Thanks
Add word-break: initial; on the <input>
Its a new CSS 3 keyword, and luckily has -WebKit support :)
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...