2012-02-10 9 views
0

text-overflow: ellipsisを使用して自分のウェブサイトのテキストを切り詰めようとしています。 Firefoxでは正しく表示されますが、IEでは表示されません。私は私のコードと、それは以下のFirefoxとIEの両方で表示する方法の例が含まれている:Internet Explorerで省略記号がうまく機能しませんでした

.ellipsis { 
    font-weight: bold; 
    height: 1.2em; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    width: 150px; 
} 

Elippis on IE and Firefox

+1

'-ms-text-overflow:ellipsis;'を試しましたか? –

+0

IE6の時点でテキストオーバーフローが発生しているため、Microsoftのベンダープレフィックスを使用する必要はありません。 – tobint

答えて

0

私はIEがないうまくいくように、divタグをラップするためにタグを使用しているため、私は、解決策を見つけました。

divタグの内側にタグを移動してもうまくいきます。みんなに助けてくれてありがとう。

2

text-overflowavailable as of IE6されているので、あなたは、Microsoftベンダープレフィックスを使用する必要はありません。しかし、あなたのサイトがサポートしようとしているものに応じてOperaやWebkitの拡張機能が必要になるかもしれません。

これをテストするInternet Explorerのバージョンは何ですか?

明らかに同じ機能にはjQuery pluginを使用できますが、前述のようにIEを唯一の問題とする必要はありません。ここで

は、この機能を使用して動作するはずのコードの簡単な再現である:

<!DOCTYPE html> 
<html> 
<head> 
    <title>text-overflow: ellipsis</title> 
    <style type="text/css"> 
    .ellipsis { 
     height: 1.2em; 
     overflow: hidden; 
     text-overflow: ellipsis; 
     white-space: nowrap; 
     width: 150px; 
    } 
    </style> 
</head> 
<body> 
    <div class="ellipsis"> 
      This is a test of the less-than-emergency 
      broadcast system. This is only a test. 
    </div> 
</body> 
</html> 
関連する問題