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

Question

我有一个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个字符,然后在手风琴元素激活(展开)时展开文本以显示完整的字符串？

Answer 1

您可以使用CSS将标题限制为一行.

例如:

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

http://jsfiddle.net/jmKu4/