2

タイトルセクションのテキストが非常に長くなる可能性があるJQueryアコーディオンがあります。

<div id="accordion">
    <h3><a href="#">Title 1</a></h3>
    <div>
        Content 1
    </div>
    <h3><a href="#">Title 2 is really really long. Ideally, only a part of title 2 will be displayed here and the remaining text should be displayed when the accordion is expanded</a></h3>
    <div>
        Content 2
    </div>
    <h3><a href="#">Title 3</a></h3>
    <div>
        Content 3
    </div>
    <h3><a href="#">Title 4</a></h3>
    <div>
        Content 4
    </div>
</div>​

フィドルの例：

http://jsfiddle.net/865M9/

アコーディオンが閉じているときにタイトルの最初の20文字だけを表示し、アコーディオン要素がアクティブ（展開）のときにテキストを展開して完全な文字列を表示する方法はありますか？

4

1 に答える 1

8

CSS で見出しを 1 行に制限することができます。

例えば：

.ui-accordion-header.ui-state-default a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

http://jsfiddle.net/jmKu4/

于 2012-11-06T03:12:45.370 に答える