How do I format text to wrap onto a second line using bootstrap?


Tags: html,css,django,twitter-bootstrap

Problem :

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;
}


Solution :

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


    CSS Howto..

    how to add parent class in css file?

    How to hide element label by element id in CSS?

    how to set individual scroll for content and left menu

    How to align navbar to center with css

    How can div with be controlled with responsiveness

    How can I change the css of this when I click on anything but this?

    How do I get rid of this blue halo around the close dialog button with jqueryui?

    Show s horizontally in a div
    table { display: inline-block; } This should work just fine for you....
    Read more

    How can I get jQuery to toggle a class with fadeToggle?

    How to apply Javascript conditionally on a specific css-class only?

    How Do I Limit Scrolling to a Fixed Div?

    how to position a css sprite as background for another class

    How to apply CSS to elements that have multiple classes?

    How to fit your website for all or at lest most screen resolutions?

    How can I get an element to stay within the browser's window width when its content is wider?

    How to add opacity on background?

    How to Slide or Move this Set of Divs

    How Can I use CSS to Add an Element Below another Element?

    Navbar on left of page, how to let content resize to match screen size?

    css - how to determine why a particular css rule is being overwritten

    tooltip pointer is showing downwards to the left of the hyper link

    Force browsers load CSS before showing the page

    How to set content to -webkit-slider-thumb

    How to show borders of th elements with gradient fills in IE9?

    How to add a repeating png image in the background of a webpage using CSS?

    How to enlarge and tint photo with pure CSS and jQuery [closed]

    How to render text in .NET in the same size as browsers does given CSS for the text

    How to select a great grandchild of an element by its id

    How to add and remove background images in css on clicking a link on page

    How to not display css padding when span element is empty