如果文本溢出=它转到下一行

Question

如果文本溢出，如何使文本转到第二行？ Fiddle

代码

.maincard {
overflow-y: hidden;
white-space: nowrap;
}

.card {
display:inline-block;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 200px;
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.container {
    padding: 2px 16px;
}

<h2>Card</h2>
<div class="maincard">
<div class="card">
  <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:100%">
  <div class="container">
    <h4><b>My name is John Doeeeee And Help meeee</b></h4> 
  </div>
</div>
<div class="card">
  <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:100%">
  <div class="container">
    <h4><b>John Doeeeeeeeeeeeeeeeeeeeee</b></h4> 
  </div>
</div>
<div class="card">
  <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:100%">
  <div class="container">
    <h4><b>John Doeeeeeeeeeeeeeeeeeeeee</b></h4> 
  </div>
</div>
</div>

一种方法是使用：display：inline-table，但这不是我想要的。它不会将测试发送到第二行。

Answer 1

您使用white-space: nowrap上的.maincard将所有卡片放在同一条线上。此定义由内部.card项和<h4>继承，并阻止文本换行。 在.card上将白色空间环绕恢复到正常状态，并将卡对齐 顶部：

.card {
  display: inline-block;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  width: 200px;
  vertical-align: top;
  white-space: normal;
}

＆＃13;

＆＃13;

.maincard {
  overflow-y: hidden;
  white-space: nowrap;
}

.card {
  display: inline-block;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  width: 200px;
  vertical-align: top;
  white-space: normal;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
  padding: 2px 16px;
}

＆＃13;

<h2>Card</h2>
<div class="maincard">
  <div class="card">
    <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:100%">
    <div class="container">
      <h4><b>My name is John Doeeeee And Help meeee</b></h4>
    </div>
  </div>
  <div class="card">
    <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:100%">
    <div class="container">
      <h4><b>John Doeeeeeeeeeeeeeeeeeeeee</b></h4>
    </div>
  </div>
  <div class="card">
    <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:100%">
    <div class="container">
      <h4><b>John Doeeeeeeeeeeeeeeeeeeeee</b></h4>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个：

     overflow: auto;
     white-space: nowrap;
     box-sizing: border-box;
     padding: 5px;

Answer 3

试试这个： Fiddle

.maincard {
   overflow-y: hidden;
   white-space: pre-line;
}

.maincard .container,
.maincard .container * {
    overflow: hidden;
    text-overflow: ellipsis;
}

Answer 4

以下是两种方式：

  

A）使用：word-wrap: break-word;财产。

.container {
    padding: 2px 16px;
    white-space: normal;<---------------Added
    word-wrap: break-word;<-------------Added
}

.maincard {
overflow-y: hidden;
white-space: nowrap;
}

.card {
display:inline-block;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 200px;
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.container {
    padding: 2px 16px;
    white-space: normal;
    word-wrap: break-word;

}

<h2>Card</h2>
<div class="maincard">
<div class="card">
  <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:100%">
  <div class="container">
    <h4><b>My name is John Doeeeee And Help meeee</b></h4> 
  </div>
</div>
<div class="card">
  <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:100%">
  <div class="container">
    <h4><b>John Doeeeeeeeeeeeeeeeeeeeee</b></h4> 
  </div>
</div>
<div class="card">
  <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:100%">
  <div class="container">
    <h4><b>John Doeeeeeeeeeeeeeeeeeeeee</b></h4> 
  </div>
</div>
</div>

  

B）使用：word-break: break-all;财产。

.container {
    padding: 2px 16px;
    white-space: normal;<---------------Added
    word-break: break-all;<-------------Added
}

.maincard {
overflow-y: hidden;
white-space: nowrap;
}

.card {
display:inline-block;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 200px;
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.container {
    padding: 2px 16px;
    white-space: normal;
    word-break: break-all;

}

<h2>Card</h2>
<div class="maincard">
<div class="card">
  <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:100%">
  <div class="container">
    <h4><b>My name is John Doeeeee And Help meeee</b></h4> 
  </div>
</div>
<div class="card">
  <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:100%">
  <div class="container">
    <h4><b>John Doeeeeeeeeeeeeeeeeeeeee</b></h4> 
  </div>
</div>
<div class="card">
  <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:100%">
  <div class="container">
    <h4><b>John Doeeeeeeeeeeeeeeeeeeeee</b></h4> 
  </div>
</div>
</div>