jQuery扩展器插件css文本显示失败

Question

为什么文本在显示时排成一行？

jquery插件：http://plugins.learningjquery.com/expander/

HTML：

<div class="expandable">
        <span style="font-size:13px;">Description this is an item that is very good and i like it very cool muchtion this is an item that is very good and i like it very much Descr this is an item that is very good and i like it very much Desc this is an item that is very good and i like it very much pt</span>
        </div>

Jquery的：

$('div.expandable span').expander({
slicePoint:       69,  // default is 100

expandText:       'More', // default is 'read more'

userCollapseText: 'Less'  // default is 'read less'

}）;

Answer 1

因为div有每个defualt设置以下css规则：

display: block;

这意味着，它填补了一个新线，除非您不将其更改为：

display: inline;

总之，请尝试将其设置为内联元素。

此外，我不认为你需要周围的div。默认情况下，span元素始终是内联的。只需从那里的div设置类，更改你的jQuery选择器，一切都应该正常工作。

编辑：有关css显示属性的更多信息，请查看此处：http://www.w3schools.com/cssref/pr_class_display.asp

编辑：插件在执行扩展/折叠时为显示属性设置了一些奇怪的原因。所以，你需要做的是改变

$('div.expandable span').expander({
slicePoint:       69,  // default is 100

expandText:       'More', // default is 'read more'

userCollapseText: 'Less'  // default is 'read less'
});

致电

$('div.expandable span').expander({
slicePoint:       69,  // default is 100
afterExpand: function()
             {
                $("div.expandable span").css("display", "inline");
             },
expandText:       'More', // default is 'read more'

userCollapseText: 'Less'  // default is 'read less'
});

有时，jQuery .show（）方法的默认处理也没有例外。有时您需要在元素上定义自己的show方法。我认为该插件只使用.show（），这会导致显示错误。