Menu
Given a block container
<div>
this is a very long string which contains a bunch of characters that I want to break at container edges.
</div>
are there any css properties I can set to force it to break when it reaches the container width, regardless of the contents of the string, for example a break like:
this is a ve
ry long stri
ng which ...
is pretty much what I want. Right now, it seems to always prefer to break at whitespace characters or other special characters (such as /).
728
The overflow-wrap CSS property applies to inline elements, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box.
break-word: This is the actual CSS syntax that tells the browser to wrap a long text over to a new line. normal: It breaks each word at the normal points of separation within a DOM. It doesn't have effect on long strings. initial: It's the default browser's way of handling strings.
If you want to prevent the text from wrapping, you can apply white-space: nowrap; Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code).
There's a CSS3 property called word-break that may be of some use to you in future.
More information is available here: http://www.css3.com/css-word-break/
The break-all value looks to do the thing you're asking for:
Useful where content contains a majority of Asian character set content, to which this value behaves like ‘normal’. Non-Asian character set content may be arbitrarily broken across lines.
As for more supported versions of CSS, I don't believe there's a way you can do this.
127
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
