引导崩溃跨度在不应该的时候打破了界限答案

【问题标题】：bootstrap collapse span is breaking lines when it shouldn't be引导崩溃跨度在不应该的时候打破了界限
【发布时间】：2018-05-11 08:30:33
【问题描述】：

我在使用引导折叠按钮时遇到问题，我正在尝试在折叠按钮后阻止线条中断。

我在stackoverflow answer 看到了这个帖子，它给出了我应该使用 span 而不是 div 来阻止链接断开但它不起作用的答案。

当我激活折叠时，它会在一瞬间更改为正确的格式（无换行符），然后又恢复为换行符。它很神秘，因为它在一瞬间是正确的，然后才更改为不正确的格式。流程可见video

我也尝试使用 div 类，同时使用“style="display: inline" 更改样式，但效果不佳。

我通过 stackoverflow 在 stackoverflow question 找到了一个类似的问题，但他们提供的答案是在我的 span 周围包裹一个 div class=row ，这根本不起作用。我不确定为什么这个问题的答案是有意义的，因为 div class=row 是为了换行。

下面是我的 html 中的 sn-p。我在 django 上运行我的应用程序。感谢任何人都可以就这个问题提供任何建议

          <div class="row">
            <div class="col-xs-11 col-sm-11" style="float:left">                    

              {% if poll.description %}
              <div class="Mobilefont Compfont">
                  <b class="reducesize">

                    {{ poll.description|striptags|safe|slice:":100" }}

                  <button class="btn btn-link" data-toggle="collapse" data-target=#{{poll}} style="padding:0px; margin:0px"><small><small><small>More</small></small></small></button>

                  <span id={{poll}} class="collapse">

                    {{ poll.description|striptags|safe|slice:"100:" }}

                  </span>

                    <small> - {{ poll.date|timesince }} ago</small></b>
              </div><br>
              {% endif %}

            </div>
          </div>

【问题讨论】：

标签： html django twitter-bootstrap-3

【解决方案1】：

我附上了下面的 CSS 样式来解决这个问题。

<style>

.reducesize
{
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;

}
.reducesize .collapse.in{
     display: inline;
}

</style>

【讨论】：

【解决方案2】：

我是 Parshant。我看过你关于工作的帖子。我可以解决这个问题。原因是您的跨度有大文本，很难放入 100% 容器中。有两种方法可以解决这个问题。最新的一个：只需将 2 个属性添加到您的父标签 <b class="reducesize"</b> display:flex; align-items:flex-start;

旧方式：您必须为每个元素定义一个宽度，然后向左浮动等。

【讨论】：