Jquery Accordion - 在标题元素中隐藏和显示文本

Question

我有一个 JQuery Accordion ，标题部分的文本可能会很长。

<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>​

示例 fiddle :

http://jsfiddle.net/865M9/

有没有一种方法可以在 Accordion 关闭时仅显示标题的前 20 个字符，然后在 Accordion 元素处于事件状态(展开)时展开文本以显示完整的字符串？

Answer 1

您可以使用 CSS 将标题限制在一行。

例如:

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

http://jsfiddle.net/jmKu4/