Question

正如标题所说，我想根据指定容器的宽度和高度截断用户输入的文本字符串。我的规范是截断字符串，在结尾显示一些消息，如Read More，当用户点击它时，文本会向下滑动。

更新：啊！忘了一件事。它也应该处理多字节字符。

有人可以说明我有哪些选择吗？ jQuery插件还是一些漂亮的jquery片段？

谢谢和问候

Answer 1

jQuery Expander插件：

HTML：

<div class="expandable">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.
    </p>
    <p>Reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui 
    officia deserunt mollit anim id est laborum.
    </p>
    </div>

使用Javascript：

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.expander.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {

  // simple example, using all default options
  $('div.expandable p').expander();

  // *** OR ***

  // override some default options
  $('div.expandable p').expander({
    slicePoint:       80,  // default is 100
    expandText:         '[...]', // default is 'read more...'
    collapseTimer:    5000, // re-collapses after 5 seconds; default is 0, so no re-collapsing
    userCollapseText: '[^]'  // default is '[collapse expanded text]'
  });

});
</script>

来源：

http://plugins.learningjquery.com/expander/index.html

在此处查看演示：

http://plugins.learningjquery.com/expander/demo/index.html

祝你好运，问我是否需要澄清！

jquery插件，用于按容器宽度/高度截断长文本字符串

1 个答案: