Question

使用Bootstrap 4，我创建了一个网格。在电话上，右列上的文本足够长，可以使该行更高。我通过将主体设置为375px宽来模拟了这一点。我希望该行保持图像的大小，然后应用text-overflow: ellipsis来隐藏溢出该行的文本。我该怎么办？

我的CSS和HTML在下面。

.infoHeader {
  text-transform: uppercase;
}

#posterCol {
  max-width: 184px;
}

.movieDBImg {
  border-radius: 4px;
}

body {
  width: 375px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
  <div class="flex-container" style="padding: 15px;">
    <div class="row">
      <div class="col" id="posterCol"><img class="movieDBImg" style="max-width: 154px;"
          src="https://image.tmdb.org/t/p/w300/cezWGskPY5x7GaglTTRN4Fugfb8.jpg"></div>
      <div class="col">
        <div class="row text-muted infoHeader">Directors</div>
        <div class="row">
          Joss Whedon
        </div>
        <div class="row text-muted infoHeader">Genres</div>
        <div class="row">
          <p class="card-text">
            Science Fiction,
            Action,
            Adventure</p>
        </div>
        <div class="row text-muted infoHeader">Cast</div>
        <div class="row">
          Robert Downey Jr.,
          Chris Evans,
          Mark Ruffalo,
          Chris Hemsworth,
          Scarlett Johansson,
          Jeremy Renner,
          Tom Hiddleston,
          Clark Gregg,
          Cobie Smulders,
          Stellan Skarsgård</div>
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

我已使用媒体查询在移动视图中为您的描述应用了text-overflow: ellipsis。我简化了您的CSS和内联样式。

.exp-container img {
    max-width: 130px;
    border-radius: 4px;
}

.text-muted {
    text-transform: uppercase;
}

body {
    width: 375px;
}

@media (max-width: 767px) {
    .exp-content .text {
        width: 170px;
        overflow: hidden;
        display: inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex">
    <div class="exp-container">
        <img src="https://image.tmdb.org/t/p/w300/cezWGskPY5x7GaglTTRN4Fugfb8.jpg" class="img-fluid">
    </div>
    <div class="exp-content mr-auto ml-3">
        <div class="text-muted">Directors</div>
        <div class="text">Joss Whedon</div>
        <div class="text-muted">Genres</div>
        <div class="text">Science Fiction, Action, Adventure</div>
        <div class="text-muted">Cast</div>
        <div class="text">Robert Downey Jr., Chris Evans, Mark Ruffalo, Chris Hemsworth, Scarlett Johansson, Jeremy Renner, Tom Hiddleston, Clark Gregg, Cobie Smulders, Stellan Skarsgård</div>
    </div>
</div>

使多列大小成为最小列

1 个答案: