CODEWITHSUNDEEP
htmlcsssafari
Tantelope
Tantelope

Reputation: 617

CSS - Safari overflow:hidden hides text but doesn't cut it off

I'll do my best to explain this, but the easiest way to see my problem is to go to this JSFiddle with Safari and see for yourself.

Chrome Safari

I have a whole bunch of these square divs with an image and a title that are nicely lined up in a row. I use overflow:hidden to cut off the extra text in the title and everyone is happy. In Safari, however, the overflow:hidden hides the overflowing text, but the text still occupies the space, thus pushing the whole container up and making it look like it's not aligned with the rest of the containers.

Please forgive the giant mess of extra code; I tried to prune out the extra stuff as much as I could.

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>

this is the class that does the overflow hiding:

.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;
}

Upvotes: 1

Views: 975

Answers (1)

j08691
j08691

Reputation: 207900

Add vertical-align:top; to 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

Upvotes: 1

Related Questions