How to make uneven text wrapping (not square or ro

Question

How to make text wrapping like this with semantic and clean HTML, CSS ? With compatible in all browser.

Adding different classes to <p> is the only solution I'm thinking if there is no other solution.

but with that way every time client would not be able to change classes, which is drawback.

Answer 1

You could set the image as a background on your <p> and then float transparent containers overtop of the background image in the shape that you don't want text to overlap.

<p>
    <span id="block1"></span>  
    <span id="block2"></span>  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...
</p>

With the following CSS:

p {
   background: url(your-image.png) no-repeat 100% 0;
}

#block1 {
   float: right;
   width: 100px;
   height: 100px;
}

#block2 {
   clear: both;
   float: right;
   width: 200px;
   height: 50px;
}

The drawback though is that as with your paragraph class solution, this is a very manual fix. You can see it in action here.