Bootstrap 4中带有长文本的5列ROW答案

【问题标题】：5 column ROW with long text in Bootstrap 4Bootstrap 4中带有长文本的5列ROW
【发布时间】：2020-03-25 03:22:26
【问题描述】：

我知道 bootstrap 4 如何使用 col 而不是 col-xs 但我面临的问题是，当列中的文本太长而无法在小屏幕设备上容纳时，列开始在下方堆叠彼此。有什么办法可以防止这种情况并将 col 宽度固定为屏幕的 1/5 并切断多余的文本。试试下面的代码并压缩你的浏览器宽度。

<div class="container-fluid">
<div class="row">
    <div class="col">some loong loong loong loong loong text</div>
    <div class="col">some loong loong loong loong loong text</div>
    <div class="col">some loong loong loong loong loong text</div>
    <div class="col">some loong loong loong loong loong text</div>
    <div class="col">some loong loong loong loong loong text</div>
</div>

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4 twitter-bootstrap-4

【解决方案1】：

您可以使用text-truncate 类。当文本太长时，这将防止列内的文本换行并使用省略号 (...)。

https://www.codeply.com/go/rGFZfVlidi

<div class="container-fluid">
    <div class="row">
        <div class="col text-truncate">some loong loong loong loong loong text</div>
        <div class="col text-truncate">some loong loong loong loong loong text</div>
        <div class="col text-truncate">some loong loong loong loong loong text</div>
        <div class="col text-truncate">some loong loong loong loong loong text</div>
        <div class="col text-truncate">some loong loong loong loong loong text</div>
    </div>
</div>

如果您不想使用...，也可以使用text-nowrap。在 Bootstrap 4 中阅读有关 text wrapping and overflow 的更多信息。

【讨论】：

【解决方案2】：

您可以通过添加 flex-nowrap 来避免换行

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" >
<div class="container-fluid">
  <div class="row flex-nowrap">
    <div class="col">some loong loong loong loong loong text</div>
    <div class="col">some loong loong loong loong loong text</div>
    <div class="col">some loong loong loong loong loong text</div>
    <div class="col">some loong loong loong loong loong text</div>
    <div class="col">some loong loong loong loong loong text</div>
  </div>
</div>

【讨论】：