4

サイズ変更可能な jQueryUI と Internet Explorer に問題があります。テキストを含むスパンを含むサイズ変更可能な div を作成しています。IE10 では、テキストがコンテナー div よりも大きい場合、div のハンドルはテキストの上下でのみクリック可能です。Chromeでは完全に機能します。

これはコードです（テスト用にjsFiddleを作成しました）：

HTML

<div id="event">
    <span>some text some text</span>
</div>

CSS

#event {
    float: left;
    position: absolute;
    border: 2px solid #197ea3;
    background: #aee3f4;
    height: 16px;
    overflow: hidden;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 16px;
    padding-left: 3px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Javascript

$(document).ready(function() {
    $("#event").resizable({
        handles : "e"
    })
});

編集:text-overflow: ellipsisプロパティを追加し、jsFiddle を更新しました

4

2 に答える 2

0

上司のおかげで、シンプルでエレガントな解決策を見つけましたtext-overflow: ellipsis。テキストがコンテナーよりも大きい場合、この css プロパティ (知らなかったので残念です) は、テキストの末尾に 3 つのドットを追加します。これらのドットは明らかに「標準テキスト」としてカウントされないため、ハンドルを超えないようにしてください。

残念ながら、これは完全な解決策ではありません。テキストがコンテナとまったく同じ大きさの場合、ドットが表示されず、ハンドルに到達できないままになるためです...

新しいプロパティを使用して、質問の jsFiddle リンクを編集します。

于 2013-02-19T18:31:51.783 に答える