2017-02-15 6 views
0

DIVコントロールを使用して長いテキストを最大3行にカットしたいとします。 Chromeでは完璧に動作しますが、FFやIEでは動作しません。 は、ここに私のXPageです:FFやIEではなく省略形の複数行のテキストは機能しません。

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

をそしてここで私が得たものです。それを修正するには? enter image description here

答えて

1
-webkit-line-clamp: 3 

作業のみのWebKitブラウザは、などクロム、サファリ、オペラリファレンスここでcaniuse.com

ようにあなたは、この別の方法を決定する方法を読むことができ、このオプションcss-tricks.com

関連する問題