Question

我正在尝试这样做，以便在添加第三张材料卡时，它的大小与前两张相同。当前，第三张卡较大，但我想使其尺寸减小一半（分别与前两张卡一致）。另外，有没有办法使文字（如第一张卡片所示）不脱离卡片？我需要保留.card-content{ white-space: nowrap;}，以使某些间距正确，并在最小化屏幕时防止文本破裂。

HTML：

<!DOCTYPE html>
<html lang="en">

<head>
  <title>SB Admin 2 - Tables</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

  <link href="css/sb-admin-2.min.css" rel="stylesheet">
    <link href="css/couponsexample.css" rel="stylesheet">
</head>
  <body>
  <section
  <div class="container">
     <div class="row">
      <div class="col s12 m6">
        <div class="card">
         <div class="card-content">
           <div class="dropdown no-arrow right">
          <a class="dropdown-toggle right" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
 </a>
</div>
 <span class="card-title blue-text text-darken-2">TestestTestestTestestTestestTestestTestestTestestTestestTestestTestestTestestTestestTestestTestest
  </span>
   <span class="card-title blue-text text-darken-2">5 dollar amount</span>

  </div>                                                                  
      </div>
       </div>
         <div class="col s12 m6">
            <div class="card">
              <div class="card-content">

       <span class="card-title blue-text text-darken-2">Test2 Test2
          </span>
         <span class="card-title blue-text text-darken-2">Test2Test2</span>
              </div>
            </div>
              </div>
<div class="col s12 m6">
  <div class="card">
   <div class="card-content">
     <span class="card-title blue-text text-darken-2">Test3 Test3
      </span>
        <span class="card-title blue-text text-darken-2">Test3</span>
          </div>
             </div>
                </div>
                  </div>
                     </div>
        </section>
</body>
</html>

CSS：

/* Coupon Code */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

.card .card-title.hidden {
  text-indent: -9999px;
}
.card .card-badge {
  position:relative;
  top: 0px;
  width: 100%;
  text-align: left;
  text-transform: uppercase;
  font-size: 0.9em;
  padding: 0.2em 24px 0.8em 24px;
  color: #fff;

}
.card .card-badge .material-icons {
  position: relative;
  margin-right: 8px;
  top: 7px;
}
.card .card-badge + .card-title {
  padding-bottom: 66px;
}
.card.horizontal .card-badge {
  text-align: center;
  padding: 0.2em 0;
}
.card.horizontal .card-badge .material-icons {
  display: none;
}

.card-action {
  white-space: nowrap;
}

.card-content{
    white-space: nowrap;

}

如何使材质卡尺寸一致

0 个答案: