2

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

编辑：使用溢出更新图像：隐藏已删除。

我试图让第二行与人的图像后的第一行对齐。 在此处输入图像描述

模板中的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;
}
4

1 回答 1

8

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

于 2012-11-30T14:28:43.797 回答