在没有Bootstrap

Question

我正在尝试创建具有图像，文本和div之间间距的响应div。 我有间距和文字的div，但他们不会在更多的文字上调整大小。 我想尝试这样的事情。

这个在一些div中有更多文本，每个其他div都会调整大小。

这是我得到的：

＆＃13;

＆＃13;

.img{
 width:300px;
 height:100%;
}
.image { 

   position: relative; 
   width: 100%; /* for IE 6 */
}

h3{
   background-color: rgba(0, 0, 0, 0.5);

   position: absolute; 
   top: 105px;
   left: 0; 
   width: 300px; 
   color:white;
}

＆＃13;

<div class="image">

      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
      
      <h3>A Movie in the Park:<br />Kung Fu Panda</h2>

</div>
<div class="image">

      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
      
      <h3>A Movie in the Park:<br />Kung Fu Panda</h2>

</div>
<div class="image">

      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
      
      <h3>sadasdsadsadsadsadsadasdasdsadsadsadsadas</h2>

</div>

＆＃13;

＆＃13;

＆＃13;

我需要div来调整文本的大小并覆盖它的底部。 目前我打破了＆lt; br＆gt;这不是我打算如何做到的。

Answer 1

在word-wrap: break-word;

上尝试h3属性

h3{
    word-wrap: break-word;
}

希望这有助于......

Answer 2

如果您想要连字符，可以使用css＆＃34;连字符＆＃34;属性，让浏览器决定在哪里打破。查看示例（使用后备，作为浏览器support is not so good, especially for some languages）

＆＃13;

＆＃13;

h3 {
     word-break: break-word; /* non standard for webkit */ 
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
}


.img{
 width:300px;
 height:100%;
}
.image { 

   position: relative; 
   width: 100%; /* for IE 6 */
}

h3{
   background-color: rgba(0, 0, 0, 0.5);

   position: absolute; 
   top: 105px;
   left: 0; 
   width: 100px; 
   color:white;
}

＆＃13;

<div class="image">

      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
      
      <h3 lang="en">A Movie in the Park:<br />Kung Fu Panda</h2>

</div>
<div class="image">

      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
      
      <h3 lang="en">A Movie in the Park: Kung Fu Panda</h2>

</div>
<div class="image">

      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
      
      <h3 lang="en">Incomprehensibilities </h2>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

sadasdsadsadsadsadsadasdasdsadsadsadsadas这是垃圾值，这不是你可以像这样使用的词

.img{
 width:300px;
 height:100%;
}
.image { 

   position: relative; 
   width: 100%; /* for IE 6 */
}

h3{
   background-color: rgba(0, 0, 0, 0.5);

   position: absolute; 
   top: 105px;
   left: 0; 
   width: 300px; 
   color:white;
}

<div class="image">

      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
      
      <h3>A Movie in the Park:<br />Kung Fu Panda</h2>

</div>
<div class="image">

      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
      
      <h3>A Movie in the Park:<br />Kung Fu Panda</h2>

</div>
<div class="image">

      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
      
      <h3>sadasdsa dsadsadsadsa dasdasdsads adsadsadas</h2>

</div>

Answer 4

您可以word-break: break-all;使用h3

.img{
 width:300px;
 height:100%;
}
.image { 

   position: relative; 
   width: 100%; /* for IE 6 */
}

h3{
   background-color: rgba(0, 0, 0, 0.5);
   word-break: break-all;
   position: absolute; 
   top: 105px;
   left: 0; 
   width: 300px; 
   color:white;
}

<div class="image">

      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
      
      <h3>A Movie in the Park:<br />Kung Fu Panda</h2>

</div>
<div class="image">

      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
      
      <h3>A Movie in the Park:<br />Kung Fu Panda</h2>

</div>
<div class="image">

      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
      
      <h3>sadasdsadsadsadsadsadasdasdsadsadsadsadas</h2>

</div>