Search code examples
htmlimageword-wrap

html wrap and break word around image


I need to wrap text around an image, this text may contain a very long word (medicine names). I'm doing the obvious and have been trying with few other things but this is how my current code looks.

<div style='width:120px;'>
    <img scr="myImage.png" style='float:right;width:50px;'>
    <p style='word-wrap:break-word;'>This_is_the_very_long_word_without_hyphens_I_need_to_wrap_.</p>
    <p>This is a normal paragraph of text that needs to flow around the image if there is space available. Leaving the option of tables out of question and specially because the height of the image may vary and don't want a huge white space between the paragraphs.</p>
<div>

So, the word will wrap on the div but under the image :(.


Solution

  • Instead of word-wrap: break-word, which literally br eaks wo rds, use hyphens: auto and back it up with browser-prefixed versions and JavaScript-based hyphenation. Example (with corrected and augmented markup):

    <!doctype html>
    <html lang=en>
    <script src=
    "http://hyphenator.googlecode.com/svn/tags/Version%204.1.0/Hyphenator.js">
    </script>
    <script type="text/javascript">
    Hyphenator.config({useCSS3hyphenation: true});
    Hyphenator.run();
    </script>
    <style>
    .hyphenate { -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
    </style>
     <div style='width:120px;'>  
        <img src="myImage.png" alt="" style='float:right;width:50px;'>
        <p class=hyphenate>Xylometazoline
        <p>This is a normal paragraph of text...</p>
    </div>