如何在引導卡中水平放置列表項（列表必須動態放置，即來自后端）

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 */