6 
<div class="jspPane" style="padding: 0px; top: 0px; width: 138px;">
   <ul style="display: block;">
     <li class="hyperlink" >
        <span class="xyz1" style="background-image:url(/Content/images/icon_link_16x7.png);"> View on Bing Maps website</span>
    </li>
  </ul>
</div>

////クラス //

 ul li {
    color: #137AFF;
    height: 25px;
    overflow: hidden;
    padding-left: 5px;
    padding-right: 4px;
    padding-top: 4px;
    text-align: left;
    text-overflow: ellipsis;
    width: 138px;
}
.hyperlink {
    color: #13A3F7;
    font-size: 12px !important;
    text-decoration: underline;
    white-space: nowrap;
}

私の問題は、最も内側のスパン内のテキストに省略記号を付けたいことです。IE9 と IE8 で省略記号を取得できません。Fire Foxでは問題なく動作します。スパンを削除して代わりに div を使用しようとしましたが、役に立ちませんでした。何か見逃している場合はお知らせください。すべての助けに感謝します。ありがとうございました。

4

5 に答える 5

8

私が知る限り、に関する msdn 開発者の記事をtext-overflow読むと、次を使用する必要があります-ms-text-overflow。

ul li {
    color: #137AFF;
    height: 25px;
    overflow: hidden;
    padding-left: 5px;
    padding-right: 4px;
    padding-top: 4px;
    text-align: left;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    width: 138px; /* note that this width will have to be smaller to see the effect */
}

デモ

于 2012-11-06T22:09:43.723 に答える
4

空白：nowrap; ここで重要なのは、Daedalusが引用した記事では、実際には、独自のコード例でそのクラスプロパティ値を使用していません。

ul li {
color: #137AFF;
height: 25px;
overflow: hidden;
padding-left: 5px;
padding-right: 4px;
padding-top: 4px;
text-align: left;
width: 138px;
text-overflow: ellipsis;
**white-space:nowrap;**
}

実例

于 2012-11-07T14:10:02.277 に答える
2

他の 2 つの回答でも正しいですが、カスタム フォントを使用している場合は問題があります。Google ウェブフォント。

カスタム フォントで IE8 レンダリングの省略記号が間違っているデモ:
http://jsbin.com/odiqux/1

于 2013-03-19T13:07:26.330 に答える
0

@micadelli、IE9でも同様の問題があり、省略記号でレンダリングされるはずのテキストの前にWebフォントベースのアイコンがありました。

解決策は、これをクラスに追加することでした：

.node-title:before {
    content: '';
}

Font-AwesomeおよびBootstrapに関するこの問題も参照してください。

于 2015-07-10T12:04:00.680 に答える