Wrap expanding text around image

Question

I have a problem with wraping the img , when div is expanded on button click. Without styles of myDiv it wraps ok.

HTML:

<div>
    <img width='300px' src='http://freefunnydogpictures.com/wp-content/uploads/2014/05/picture_1400053660.jpg'/>
    <div class='myDiv'>Утверждён Перечень сельскохозяйственной продукции, сырья и продовольствия, страной происхождения которых являются Соединенные Штаты Америки, страны Европейского союза,... 
    </div>
</div>
<button id='myButton'>Click</button>

JavaScript:

$(document).ready(function(){
    $('#myButton').click(function(){
        $('.myDiv').height(500);
    });
});

CSS:

img{
    float:left;
}

.myDiv{
    height:100px;
    overflow:hidden;
}

http://jsfiddle.net/pfodox/z05cwh5g/ .

Answer 1

您应该删除myDiv类中的overflow:hidden

Answer 2

The problem is more than just the text-align. Your issue is with having the text wrapped in a DIV. Furthermore, floating auto-wraps.

I don't know of a simple way to do what you're asking, but you may want to look into http://css-tricks.com/line-clampin/ .

Edit: Here's a variation of vivek_nk's code, in case you need to keep the button as a toggle to collapse the content again: http://jsfiddle.net/tsukasadt/xnd544k1/

Here's the jQuery toggle function:

$('#myButton').toggle(function () {
    $('.myDiv').css('height','auto');
    $('.myDiv').css('overflow','visible');
}, function () {
    $('.myDiv').css('height','100px');
    $('.myDiv').css('overflow','hidden');
});

I requires you move the button inside the outer DIV and replace the entire jQuery function, but it'll leave the button on the page as a toggle between the CSS for overflow hidden/visible and height 100px/auto.

Answer 3

Change the button's click function as follows.

   $('#myButton').click(function(){
      $('.myDiv').css('height','auto'); 
      // The above line will increase the height of div automatically 
      //and avoids overlapping with other elements
      $('#myButton').css('display','none');
      $('.myDiv').css('overflow','visible');
   });

Instead of changing the height hard-coded, change the "overflow" property. Because this is the one which you must reset if the text needs to get wrapped around the image. Set it to 'visible' or 'inherit'. - http://jsfiddle.net/vivek_nk/z05cwh5g/3/