Html 引导折叠跨度在不应该的情况下断开了线

我有一个引导折叠按钮的困难，我试图阻止从崩溃后的按钮线中断

我看到了这个线程，它给出了我应该使用span而不是div来阻止链接中断的答案，但它不起作用

当我激活折叠时，它会在一瞬间变为正确的格式没有换行符，然后会返回换行符。它之所以神秘，是因为它在更改为错误格式之前的一瞬间是正确的。这个过程可以在屏幕上看到

我也尝试过在使用style=display:inline修改样式时使用div类，但效果不太好

我在stackoverflow中搜索了一个类似的问题，但他们提供的答案是在我的跨度周围环绕一个div class=行，这根本不起作用。我不知道为什么这个问题的答案有意义，因为div class=row是为了打破一条新的界限

下面是我的html代码片段。我正在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>

我是帕森特。我已经看到你的帖子了。我能解决这个问题。原因是您的跨度有很大的文本，很难放入100%的容器中。有两种方法可以解决这个问题。

---

最新的一个：只需在父标签中添加2个属性我已经附加了下面的css样式来解决这个问题

<style>

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

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

</style>