2

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. enter image description here

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;
}
4
  • It will wrap if you remove the overflow: hidden; Dont know django though, and no clue what the bootstrap in django does. Nov 30, 2012 at 14:28
  • @DamienOvereem I removed overflow: hidden and it still doesn't work. To clarify, I'm not trying to hide text. I'm trying to get it to wrap onto a second line if necessary that is aligned with the first line.
    – sharataka
    Nov 30, 2012 at 14:43
  • Have a look at this: webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap
    – Sean
    Nov 30, 2012 at 14:46
  • I've never done anything like that myself, but it looks like what you need.
    – Sean
    Nov 30, 2012 at 14:46

1 Answer 1

8

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

7
  • There won't be any word wrap happening if you have overflow: hidden; Nov 30, 2012 at 14:37
  • Then just remove overflow: hidden;
    – Sean
    Nov 30, 2012 at 14:47
  • I removed overflow: hidden and it still doesn't work. To clarify, I'm not trying to hide text. I'm trying to get it to wrap onto a second line if necessary that is aligned with the first line. The "..." in the image above currently is due to django's truncatechars:40 tag.
    – sharataka
    Nov 30, 2012 at 14:47
  • 1
    Did you also add word-wrap: break-word; to the text container?
    – Sean
    Nov 30, 2012 at 14:50
  • I updated the code with word wrap and overflow:hidden; I've included a screen grab of what I see now. I'm trying to get the second line to align with the first line (after the image of the person).
    – sharataka
    Nov 30, 2012 at 14:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.