【问题标题】：How do I format text to wrap onto a second line using bootstrap?如何使用引导程序格式化文本以换行到第二行？
【发布时间】：2012-11-18 18:46:59
【问题描述】：

我正在尝试格式化下面的图像，以使文本在第一行不适合时自动换行。如果它的文本多于第二行，它将被截断。我也有多个连续拍摄的图像。我不清楚如何做到这一点，我正在为我的 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;
}

【问题讨论】：

如果你删除overflow: hidden; Dont know django，它会自动换行，也不知道 django 中的引导程序是做什么的。
@DamienOvereem 我删除了溢出：隐藏，但它仍然无法正常工作。澄清一下，我并不是要隐藏文本。如果有必要，我试图让它换行到与第一行对齐的第二行。
看看这个：webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap
我自己从来没有做过这样的事情，但它看起来像你需要的。

标签： html css django twitter-bootstrap

【解决方案1】：

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

【讨论】：

如果你有溢出就不会发生任何自动换行：hidden;
然后删除overflow: hidden;
我删除了溢出：隐藏，但它仍然不起作用。澄清一下，我并不是要隐藏文本。如果有必要，我试图让它换行到与第一行对齐的第二行。上图中的“...”目前是由于 django 的 truncatechars:40 标签造成的。
您是否也将word-wrap: break-word; 添加到文本容器中？
我用自动换行和溢出更新了代码：隐藏；我已经包含了我现在看到的屏幕截图。我试图让第二行与第一行对齐（在人的图像之后）。