CSS - Safari溢出：隐藏隐藏文本但不会将其删除

Question

我会尽力解释这一点，但查看问题的最简单方法是使用Safari访问 JSFiddle 并自行查看。

我有一大堆这些方形div，图像和标题排成一排。我使用溢出：隐藏来切断标题中的额外文本，每个人都很开心。然而，在Safari中，overflow：hidden隐藏了溢出的文本，但是文本仍然占据了空间，从而将整个容器向上推，使其看起来没有与其他容器对齐。

请原谅额外代码的巨大混乱;我试图尽可能多地修剪掉额外的东西。

JSFiddle

<li class="widget-wrapper">
  <div class="thumb-wrapper">
     <div class="triangle ng-hide"></div>
     <div class="second-triangle ng-hide"></div>
     <div class="content clearfix room-bg-color" style="background-color: red;">
        <div class="icon">
           <img class="" src="http://li.vayyoo.com/api-public/images/wg/w/Media_Types/icon-picture.png">
        </div>
        <div class="heading room-font-color clean-wrap"><!--
              --><span>Somethingwithareallylongtitlethatdoesn'tfitintothebox</span>
        </div>
     </div>
  </div>
</li>

这是执行溢出隐藏的类：

.clean-wrap {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
  overflow: hidden;
}

Answer 1

将vertical-align:top;添加到ul.block-list >li > .thumb-wrapper：

ul.block-list >li > .thumb-wrapper {
    height: 80px;
    width: 80px;
    display: inline-block;
    text-align: center;
    position: relative;
    margin: 10px;
    vertical-align:top;
}

<强> jsFiddle example