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

Posted 2023-02-24

【中文标题】Word-Wrap 长词在引导流体容器中不起作用

【英文标题】：Word-Wrap on long words not working in bootstrap fluid containers

【发布时间】：2016-02-15 13:04:26

【问题描述】：

我一直在使用引导程序使我的页面适合移动设备。我的内容是动态生成的，所以如果有人输入很长的文本（如 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，如果我检查段落，它有它，还添加了空白：正常；它没有工作

【参考方案1】：

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

【讨论】：

我无法指定宽度，否则它在手机或台式机上看起来都不错，而不是两者兼而有之。换句话说，我会失去引导流体容器

如何设置 p 元素的最大宽度？

和以前的情况一样，如果我将最大宽度（例如）设置为 100 像素，它在手机上看起来不错，但在台式机上不好看。如果我设置更大的最大宽度，则相反