dotdotdot.js文字超出隐藏常用功能记录

1.引用插件：

<script src="jquery.js"></script>
<script src="jquery.dotdotdot.js"></script>

2.CSS实现方法

<div class="dot-ellipsis dot-height-50 dot-resize-update">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic deserunt vel fugit repudiandae minus aspernatur labore, quaerat quam, doloribus esse, aliquam quisquam expedita voluptatum debitis repellendus iusto quasi explicabo. Inventore!
</p>
</div>

class名说明：

 dot-ellipsis：超出隐藏并显示...;
dot-height-50：设置预定义的元素高度，设置了这个值，上面的超出隐藏才有作用，“50”即为盒子的高度；
dot-resize-update：窗口大小改变时更新单元，用在响应式页面上，盒子的大小改变时，超出隐藏的内容实现作出改变；

3.JavaScript实现方法
创建一个DOM元素，把一些文本和其它的HTML标记在这个“wrapper”。

HTML部分:
<div id="wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic deserunt vel fugit repudiandae minus aspernatur labore, quaerat quam, doloribus esse, aliquam quisquam expedita voluptatum debitis repellendus iusto quasi explicabo. Inventore!</p>
</div>

JS部分：
$(document).ready(function() {
$("#wrapper").dotdotdot({
// configuration goes here
});
});

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
: []
}
});
});

4.在使用jquery.dotdotdot.min.js插件时，如果文本是中文的特殊字符，此时就无法解析了，因为需要配置插件wap属性，如下代码：

$("#wrapper").dotdotdot({
wrap: 'letter' //注：中文必须改为letter
});

5.自定义超出的内容

<style>
.wrapper {
width: 400px;
height: 200px;
}
</style>
<div class="wrapper">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores maxime quia velit quod, praesentium animi a, debitis incidunt, consectetur odio, voluptatum nam dolores perspiciatis quo sit. Voluptatibus ab temporibus, sit!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis vitae, dicta animi nihil magnam dolor esse soluta consectetur quasi nisi harum unde aperiam iure possimus aut commodi, molestias libero temporibus.
<a href="http://www.baidu.com" style="color: #F4606C">read more</a>
</div>
<script>
$(function(){
$(".wrapper").dotdotdot({
after: 'a'
//要显示的标签名
});
})
</script> 

注意：要自定义超出的内容，需要使用js方法实现超出隐藏。

6.通过按钮控制显示、隐藏超出内容

.wrapper {
width: 400px;
height: 200px;
}
.opened{
height: auto;
}
.toggle .close, .opened .toggle .open
{
display: none;
}
.toggle .opened, .opened .toggle .close {
display: inline;
}
<div class="wrapper">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores maxime quia velit quod, praesentium animi a, debitis incidunt, consectetur odio, voluptatum nam dolores perspiciatis quo sit. Voluptatibus ab temporibus, sit!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis vitae, dicta animi nihil magnam dolor esse soluta consectetur quasi nisi harum unde aperiam iure possimus aut commodi, molestias libero temporibus.
</div>
<script>
$(function (){
var $dot = $('.wrapper');
$dot.append( ' <a class="toggle" href="#"><span class="open">[ + ]</span><span class="close">[ - ]</span></a>' );
function createDots()
{
$dot.dotdotdot({
after: 'a.toggle'
});
}
function destroyDots() {
$dot.trigger( 'destroy' );
}
createDots();
$dot.on( 'click', 'a.toggle',
function() {
$dot.toggleClass( 'opened' );
if ( $dot.hasClass( 'opened' ) ) {
destroyDots();
} else {
createDots();
}
return false;
}
);
})
</script>

最后

以上就是悲凉跳跳糖为你收集整理的dotdotdot.js文字超出隐藏常用功能记录的全部内容，希望文章能够帮你解决dotdotdot.js文字超出隐藏常用功能记录所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。