Home/ Questions/Q 9088157
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T21:51:32+00:00

I need to wrap text around an image, this text may contain a very

  • 0

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 :(.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0