Word-Wrap 长词在引导流体容器中不起作用

Question

我一直在使用引导程序使我的页面适合移动设备。我的内容是动态生成的，所以如果有人输入很长的文本（如 lorem ipsum），因为我有截断，所以没关系，但我遇到了长词的问题。

以下是实际情况：Actual

这就是我希望它的样子：Intended

我尝试了以下解决方案均无济于事：

• bootstrap 3 wrap text content within div for horizontal alignment
• Word-wrap not working in bootstrap 3
• Twitter Bootstrap Button Text Word Wrap

我正在使用 Bootstrap 3.3.2、Twig 和 Symfony。这是代码

<tr class="row">
<td class="col-sm-12 clickable" data-toggle="modal" data-target="#myModal-{{pregunta.id}}">
    <div style="height:150px;overflow:hidden; text-overflow:ellipsis;">
        {{ pregunta.contenido|markdown|raw|truncate(150) }}
    </div>
</td>

这是它的渲染方式：

<tr class="row">
<td class="col-sm-12 clickable" data-toggle="modal" data-target="#myModal-4">
    <div style="height:150px;overflow:hidden; text-overflow:ellipsis;">
        <p>PreguntaaaaaaaaaaaaaaaaLargaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaioooooooooooo</p>

    </div>
</td>

我也添加了属性

p{
word-wrap: break-word;}

到我的css，如果我检查段落，它有它，还添加了空白：正常；它没有工作

Answer 1

如果你在元素上指定一个宽度，它应该在不需要其他任何东西的情况下包裹自己。你试过吗？另外我认为自动换行仅在您指定宽度时才有效