下の画像をフォーマットして、最初の行に収まらない場合にテキストを 2 行目に折り返すようにしようとしています。2 行目に収まりきらないテキストがある場合は、切り捨てられます。また、連続して行っている複数の画像もあります。これを行う方法が不明で、CSS に Bootstrap を使用しています。これを行う方法に関するアドバイスはありますか？
編集: 更新された画像とオーバーフロー: 非表示が削除されました。
人物の画像の後、2行目を最初の行と揃えようとしています。
テンプレートの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;
}