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

我有一个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>​

内容1
内容2
内容3
内容4
​

小提琴示例：

---

是否有一种方法可以在关闭accordion时仅显示标题的前20个字符，然后在accordion元素处于活动状态（展开）时展开文本以显示完整的字符串？

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

例如：

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

---

你知道，JSFIDLE有一个面板可以加载最流行的脚本，还有一个选项可以选择何时运行插件，

onload

，

domready

…@elclanrs-谢谢你的提示。我没有意识到这些特性，下次我创作小提琴时会研究这些特性：）太棒了！我曾考虑过使用两个单独的元素，并基于.ui accordion头显示/隐藏它们，但您的解决方案非常优雅，我希望这是可能的。非常感谢！这到底是干什么的？文本溢出：省略号@检查小提琴。您可以看到长字符串被一个。。。最后。这个是由于文本溢出造成的：ellipsis@user1：问得好，我很高兴地找到了如何使用CSS实现这一点的预感。@VIDesignz：“空白：nowrap”表示将该框中的所有文本保留在一行上（即使它不适合…而不是将其包装到多行），然后“溢出：隐藏”表示隐藏现在从框右端伸出的部分，“文本溢出：省略号”只是通过在文本聚合时添加省略号使其看起来很酷。