Question

I am trying to format the image below to have the text wrap onto a second line if it doesn’t fit on the first line. If it has more text than would fit on a second line, it truncates. I also have multiple images that I’m doing for consecutively. I’m unclear on how to do this and I’m using Bootstrap for my CSS. Any advice on how to do this?

edit: updated image with overflow: hidden removed.

I am trying to get the second line to align with the first line after image of the person.

html in template, using django

    {% for video in feed %}     
        <!-- wrapper div -->
        <div class='wrapper'>           
            <!-- image -->
            <div style="position: relative; left: 0; top: 0;">
            
            <div class = "image_container">
                <div class = 'imageblur'>   
                    <a href="{{video.3}}"> <img src = "{{video.2}}"></a>
                </div>
            </div>
            
            <p style = "width: 290px; font-size: 12px; word-wrap: break-word;"><img src = "http://graph.facebook.com/{{ user.username}}/picture">
            {{ video.1|truncatechars:80}}</p>
            
            </div>
            <!-- end image div -->
        </div>
        <!-- end wrapper div -->
    {% endfor %}

css

div.wrapper{
    float:left; /* important */
    position:relative; /* important(so we can absolutely position the description div */ 
    padding: 5px;
}

div.imageblur{
    position: relative; 
    overflow:hidden;
    top: 0; 
    left: 0; 
    width: 250px; 
    filter: blur(5px);
       -webkit-filter: blur(5px);
       -moz-filter: blur(5px);
       -o-filter: blur(5px);
       -ms-filter: blur(5px);

   margin:-1px;
   padding:1px;
}

div.image_container{
   width:248px;
   overflow:hidden;
}

Answer 1

use word-wrap: break-word; this is what worked for me