博客开发过程中遇到需要把多行文字溢出显示省略号,试过很多方法,感觉最好用的就是dotdotdot插件,下面介绍给大家使用。
1.先上图给大家看看效果
引入插件
<
script
src
=
"jquery.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"jquery.dotdotdot.js"
type
=
"text/javascript"
></
script
>
CSS实例方法
jquery.dotdotdot添加元素:
1
2
3
|
<
div
class
=
"dot-ellipsis"
>
<
p
>Lorem Ipsum is simply dummy text.</
p
>
</
div
>
|
添加jquery.dotdotdot与窗口大小改变时更新单元:
1
2
3
|
<
div
class
=
"dot-ellipsis dot-resize-update"
>
<
p
>Lorem Ipsum is simply dummy text.</
p
>
</
div
>
|
添加jquery.dotdotdot与预定义的元素高度:
1
2
3
|
<
div
class
=
"dot-ellipsis dot-height-50"
>
<
p
>Lorem Ipsum is simply dummy text.</
p
>
</
div
>
|
JavaScript方法
创建一个DOM元素,把一些文本和其它的HTML标记在这个“wrapper”。
html
1
2
3
|
<
div
id
=
"wrapper"
>
<
p
>Lorem Ipsum is simply dummy text.</
p
>
</
div
>
|
js
1
2
3
4
5
|
$(document).ready(
function
() {
$(
"#wrapper"
).dotdotdot({
// configuration goes here
});
});
|
3.配置选项
dotdotdot插件使用可以在配置对象中传递的几个选项。
所有选项(显示默认值):
- $(document).ready(function() {
- $("#wrapper").dotdotdot({
- /* The text to add as ellipsis. */
- ellipsis : '... ',
- /* How to cut off the text/html: 'word'/'letter'/'children' */
- wrap : 'word',
- /* Wrap-option fallback to 'letter' for long words */
- fallbackToLetter: true,
- /* jQuery-selector for the element to keep and put after the ellipsis. */
- after : null,
- /* Whether to update the ellipsis: true/'window' */
- watch : false,
- /* Optionally set a max-height, can be a number or function.
- If null, the height will be measured. */
- height : null,
- /* Deviation for the height-option. */
- tolerance : 0,
- /* Callback function that is fired after the ellipsis is added,
- receives two parameters: isTruncated(boolean), orgContent(string). */
- callback : function( isTruncated, orgContent ) {},
- lastCharacter : {
- /* Remove these characters from the end of the truncated text. */
- remove : [ ' ', ',', ';', '.', '!', '?' ],
- /* Don't add an ellipsis if this array contains
- the last character of the truncated text. */
- noEllipsis : []
- }
- });
- });