Многострочный текст с эллипсисом не работает в FF и IE, но в Chrome

Я хочу вырезать длинный текст до трех строк с помощью элемента управления DIV. Он отлично работает в Chrome, но не в FF и IE. Вот мой XPage:Многострочный текст с эллипсисом не работает в FF и IE, но в Chrome

<xp:div id="mainDiv" styleClass="style1"> 
    <xp:div id="contentDiv" styleClass="style2"> 
     <xp:div id="descriptionDiv" styleClass="style3"> 
      sssss sdf asdfasdf asdf 
      asdf lasdkfl asdjfld asjlfkj 
      asdlfj lasdjf asdkflasdkfjlk asdjfa 
      asldflk sjalfkj 
      asdlkfjl asdkjflasdkj flkasdjf lasdkjfl kasjdf klj 
      sdfsdaf asdfasdf asdlfksd asdlkfj daslfjl asjfl sdjakl 
     </xp:div> 
    </xp:div> 
</xp:div>

А вот CSS:

.style1 { 
    display:   inline-block; 
    vertical-align:  top; 
    height:    244px; 
    width:    359px; 
    min-width:   359px; 
    padding-top:  20px; 
    padding-bottom:  20px; 
    margin:    10px; 
    border:    1px solid #c9c9c9; 
} 

.style2{ 
    padding-left:  20px; 
    padding-right:  20px; 
} 

.style3{ 
    display:   block; 
    display:   -webkit-box; 
    height:    18 * 1.4 * 3; 
    margin:    0 auto; 
    font-size:   18px; 
    line-height:  1.4; 
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical; 
    overflow:   hidden; 
    text-overflow:  ellipsis; 
}

И вот что я получил. Как это исправить?