5 列行，长文本 Bootstrap 4

Question

我知道 bootstrap 4 如何使用 col 而不是 col-xs 但我面临的问题是当列中的文本太长而无法容纳小屏幕设备，列开始堆叠在彼此下方。有什么办法可以防止这种情况并将列宽度固定为屏幕的 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>

Answer 1

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

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 的更多信息

Answer 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>

5 列行，长文本 Bootstrap 4

5 column ROW with long text in Bootstrap 4

html

css

twitter-bootstrap

bootstrap-4

twitter-bootstrap-4