如何在引导卡中水平放置列表项（列表必须动态放置，即来自后端）

Question

我已经创建了引导卡并放置了来自后端的列表，但它没有正确显示（意味着字母一个接一个）

仪表板.comonent.html

 <li class="list-group-item" >
    <div class="row no-gutters">
      <div class="col-sm-4">
        <div class="card-body">

          <p style="font-size: 23px;">  <i class="mdi mdi-battery-unknown menu-icon " ></i>
          </p><span id="jammer"
            style="color:white;"></span>

          <h5 class="card-text text-muted" style="font-size:15px;">Lat</h5>
          <h5 class="card-text text-muted" style="font-size:15px;"> Long 
          </h5>
        </div>
      </div>

      <div class="col-sm-3">
        <div class="card-body">
          <p style="font-size: 23px;"> <i class="mdi mdi-battery-unknown menu-icon " ></i></p><span id="jammer"
          style="color:white;"></span>

        <h5 class="card-text text-muted" style="font-size:15px;">Lat</h5>
</div>
      </div>

      <div class="col-sm-2">
        <div class="card-body">
          <p  style="font-size: 23px;"> <i class="mdi mdi-battery-unknown menu-icon " ></i></p>
        </div>
      </div>

</div>
  </li>


</ul>

有没有其他方法可以水平和动态地放置列表。

任何人都可以帮助我解决这个问题。

Answer 1

在包含文本的元素或 div 上使用以下 css 属性。

word-break: break-all;
word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

上面的代码允许折叠单词但不能折叠字母。 如果您不想将任何内容包装或折叠到下一行，请在此处参考上述属性的不同值。

white-space: -moz-pre-wrap; /* Firefox */
white-space: -o-pre-wrap; /* Opera */
white-space: pre-wrap; /* Chrome */
word-wrap: break-word; /* IE */