интервал коллапса начальной загрузки разрывает линии, когда это не должно быть

Question

У меня проблемы с кнопкой «Свернуть загрузчик», я пытаюсь остановить разрыв линии после кнопки «Свернуть».

Я видел этот поток в stackoverflow answer , который дает ответ, что я должен использовать span вместо div, чтобы остановить разрыв связи, но он не работает.

Когда я активирую свертывание, он меняется на правильный формат (без разрыва строки) на долю секунды и возвращается к разрыву строки. Это загадочно, потому что это правильно на долю секунды, прежде чем изменить на неправильный формат. Процесс можно увидеть на видео

Я также пытался использовать класс div при внесении изменений в стиль с помощью "style =" display: inline ", но это также не работает.

Я прошел через stackoverflow, чтобы найти аналогичный вопрос в stackoverflow, вопрос , но ответ, который они дали, заключался в том, чтобы обернуть строку div class = в мой span, который вообще не работает. Я не уверен, почему ответ на этот вопрос имел смысл, так как 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>

Answer 1

Я добавил нижеприведенный стиль CSS, чтобы решить эту проблему.

<style>

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

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

</style>

Answer 2

Я Parshant. Я видел ваш пост о работе. Я могу это исправить. Причина в том, что ваш диапазон содержит большой текст, который трудно разместить в 100% контейнере. Есть 2 способа решить эту проблему. Последний: просто добавьте 2 свойства в родительский тег <b class="reducesize"</b> display:flex; align-items:flex-start;

Старый путь: Вы должны определить ширину для каждого элемента и затем плавать влево и т. Д.