如何使用bootstrap格式化文本以包装到第二行？

Question

我正在尝试格式化下面的图像，如果文本不适合第一行，则将文本换行到第二行。如果它的文本多于第二行的文本，则会截断。我也有多个图像，我正在连续做。我不知道如何做到这一点，我正在使用Bootstrap作为我的CSS。关于如何做到这一点的任何建议？

编辑：更新后的图像溢出：隐藏已删除。

我试图让第二行与人物形象后的第一行对齐。

模板中的

html，使用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

使用word-wrap: break-word;这对我有用