Сделать размер нескольких столбцов наименьшего столбца - PullRequest
Новая
       8

Сделать размер нескольких столбцов наименьшего столбца

0 голосов
/ 19 апреля 2019

Используя Bootstrap 4, я создал сетку.На телефоне текст в правом столбце достаточно длинный, чтобы сделать строку выше.Я смоделировал это, сделав тело шириной 375 пикселей.Мне бы хотелось, чтобы в строке оставался размер изображения, а затем применить 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>

1 Ответ

0 голосов
/ 19 апреля 2019

Я применил 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...