如何围绕div按钮包装文本？

Question

任何人都可以帮我包装+盒子周围的文字吗？我似乎无法让它发挥作用。我有一个你可以参考的jfiddle。希望那里的任何人都可以帮助我。

Here是JSFiddle。

以下是代码：

.video-box {
  float: left;
  width: 31%;
  max-width: 240px;
  height: 214px;
  background: #232323;
  margin: 0 1% 2%;
}

.video-box h3 {
  display: table-cell;
  vertical-align: middle;
  margin: 0;
  font-size: 1.0em;
  line-height: 1.2;
}

.addtoplaylist-videotext:before {
  border: solid;
  border-color: #222 transparent;
  border-width: 6px 6px 0 6px;
  bottom: -8px;
  content: "";
  left: 80%;
  position: absolute;
  display: inline-block;
  z-index: 99;
  border-top: 10px solid rgba(0, 0, 0, 0.6);
}

a {
  color: #FFFFFF;
}

.video-txt {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 1.1em;
  line-height: 16px;
  background: #000;
  padding: 0 3px;
  color: #fff;
}

.addtoplaylist-videotext {
  background-color: #ffffff;
  background-color: rgba(0, 0, 0, 0.6);
  border-color: rgba(0, 0, 0, 0.6);
  border-right-color: #ffffff;
  border-radius: 5px;
  top: -50px;
  color: #ffffff;
  left: -100px;
  padding: 5px 5px;
  position: relative;
  z-index: 99;
  width: 120px;
  height: 15px;
  text-align: center;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#1e78a0', endColorstr='#1e78a0');
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: none;
}

.viewplaylist-videotext:before {
  border: solid;
  border-color: #222 transparent;
  border-width: 6px 6px 0 6px;
  bottom: -8px;
  content: "";
  left: 80%;
  position: absolute;
  display: inline-block;
  z-index: 99;
  border-top: 10px solid rgba(0, 0, 0, 0.6);
}

.viewplaylist-videotext {
  background-color: #ffffff;
  background-color: rgba(0, 0, 0, 0.6);
  border-color: rgba(0, 0, 0, 0.6);
  border-right-color: #ffffff;
  border-radius: 5px;
  top: -50px;
  color: #ffffff;
  left: -100px;
  padding: 5px 5px;
  position: relative;
  z-index: 99;
  width: 120px;
  height: 15px;
  text-align: center;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#1e78a0', endColorstr='#1e78a0');
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: none;
}

.addtoplaylist-video:hover .addtoplaylist-videotext {
  display: block;
}

.viewplaylist-video:hover .viewplaylist-videotext {
  display: none;
}

.title {
  color: #FFFFFF;
}

.maintainhere-browse {
  float: right;
  height: 30px;
  margin-left: 3px;
  margin-top: 20px;
  position: relative;
}

.toggle2 {
  position: relative;
  float: right;
  margin-right: 10px;
  margin-top: -15px;
  background-color: #f36666;
  width: 20px;
  height: 18px;
  color: #FFFFFF;
  font-size: 12px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  cursor: pointer;
  font-weight: bold;
}

.addtoplaylist-video {
  position: relative;
  bottom: 0px;
  right: 0px;
  width: auto;
  height: auto;
  image-rendering: -moz-crisp-edges;
  display: inline-block;
  cursor: pointer;
}

.viewplaylist-video {
  display: none;
}


}
.addtoplaylist-video a {
  color: #FFFFFF !important;
}
.viewplaylist-video a {
  color: #FFFFFF !important;
}
.play-ico {
  background-position: -2px -1351px;
  background: url(/blob/1086/1386905708000/a-ico-sprite-png-data.png) no-repeat -2px -1316px;
  text-indent: -9999px;
  position: absolute;
  top: 0;
  left: 0;
  width: 33px;
  height: 33px;
  overflow: hidden;
  text-align: left;
}

<div class="video-box">
  <div class="video-box-content-holder" data-createtime="1385208101000" data-viewcounts="559">
    <div class="img" style="max-height:135px">
      <a href="/news/video/typhoon-haiyan-politics/897416.html">

        <img src="http://i58.tinypic.com/2uj2o3t.jpg" alt="" width="240" height="135" />
        <span class="play-ico">play</span>
        <span class="video-txt">01:54</span>
      </a>

      <span class="add-txt">Asia Pacific</span>
      </a>
    </div>
    <div class="txt-box">
      <!-- the class toggle 2 is for 2nd component, diff css-->
      <div class="maintainhere-browse">
        <div id="browsevideos_1" class="toggle2">

          <div class="addtoplaylist-video">
            <img src="http://i61.tinypic.com/rtdv2b.png" width="12" height="11" alt="add" class="addplaylisticonimg-browse">
            <a href="#"><span class="addtoplaylist-videotext"> Add To Playlist!</span></a>
          </div>

          <div class="viewplaylist-video">
            <img src="http://i59.tinypic.com/2n98as.png" width="17" height="9" alt="viewicon" class="viewplaylisticonimg-browse">
            <a href="#"><span class="viewplaylist-videotext"> View Playlist!</span></a>

          </div>
        </div>
      </div>
      <!--endofmaintainhere-->
      <div class="title">
        <h3 style="color:white;"><a href="/news/video/typhoon-haiyan-politics/897416.html" class="truncate-video-title" title="Typhoon Haiyan: Politics gets in the way of saving lives  ">Typhoon Haiyan: Politics gets in the way of saving lives i want the text to wrap around </a></h3>
        <span class="date" style="color:white;">23 Nov 2013</span>

      </div>
      <!-- title -->


    </div>


  </div>
</div>

Answer 1

所以基本的问题是将display: table分配给.video-box h3。

一旦删除它，它实际上是包装。现在的问题是你不会用那个文本看到它，因为碰巧这些词会移动到下一行。我添加了更多的单词并删除了容器的高度，你可以看到这个工作：

DEMO showing text is wrapping without table-cell property.

在你的情况下，我会考虑重写一些围绕.maintainhere-browse按钮定位的代码：

.maintainhere-browse{
    ...
    /*margin-top:20px; Remove this line */
    ...
}

.toggle2 {
    ...
    margin-top: 10px; /* Changed this value */
    ...
}

Demo