自动换行：断字； 不打破标签

Question

i have an issue with the word-wrap break-word property, it is supposed to break the code tag that when it hits the border of

<div>class="link alert clearfix"</div>

but it is not breaking the word, it instead jumps down on the next line, next to the "voting" div

Here is the issue:

http://meetthemes.com/post/?post=Mooncraft+-+Themeforest+Premium+Theme

Scroll down to the third download link, thats the one that jumps down

Answer 1

If you set it to display: inline-block and give it a max-width , it will break the word for you. You'll also need to remove the white-space: nowrap on the code element in your CSS, or disable it for your specific code.link class, by adding white-space: normal .

Answer 2

John suggestion not work at all, in order to work you must use also the properties entitled in this post:

So use below sample code:

<code style="display: inline-block;white-space: normal;max-width:100%; word-break:break-all; word-wrap:break-word;">anyyyyyyyylonnnnnngggggggggstringggggggggwillllbetrunnncateeeeeddddddd</code>

You can set any max-width, in integer PX, EM or by percentage nor just simply do not set a max-width, as it is not mandatory