Question

我知道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>

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

Answer 2

您可以避免换行并考虑添加word-break: break-word;

＆＃13;

.col {
  word-break: break-word;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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>

＆＃13;

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

2 个答案: