我可以在使用 jQuery 的多个字符之后隐藏 DIV 中的文本吗？
到目前为止，我认为它会像这样 - jQuery 会循环遍历文本，直到达到一定数量的字符。然后它将从该位置包装一个 DIV 到文本的末尾，然后可以使用 hide() 方法将其隐藏。我不确定如何插入该环绕文本。
也将不胜感激。
谢谢。
【问题讨论】：
标签： jquery css text formatting
如果您在 body 标记上放置了 onkeydown 事件处理程序，则可以计算感兴趣的 div 中的长度，然后您可以在完成后将其隐藏，并删除您的事件处理程序。
【讨论】：
我正在用这个替换我原来的答案.....
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var limit = 20;
var chars = $("#myDiv").text();
if (chars.length > limit) {
var visiblePart = $("<span> "+ chars.substr(0, limit-1) +"</span>");
var dots = $("<span class='dots'>... </span>");
var hiddenPart = $("<span class='more'>"+ chars.substr(limit-1) +"</span>");
var readMore = $("<span class='read-more'>Read More</span>");
readMore.click(function() {
$(this).prev().remove(); // remove dots
$(this).next().show();
$(this).remove(); // remove 'read more'
});
$("#myDiv").empty()
.append(visiblePart)
.append(dots)
.append(readMore)
.append(hiddenPart);
}
});
</script>
<style type="text/css">
span.read-more { cursor: pointer; color: red; }
span.more { display: none; }
</style>
</head>
<body>
<div id="myDiv">Here are all<br/> my characters.<br/> I would like to limit them to 20.</div>
</body>
</html>
【讨论】：
len 变量有点悬了 =)
这将隐藏部分文本
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<style type="text/css" media="screen">
.hide{
display: none;
}
</style>
<script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
var $elem = $('p'); // The element or elements with the text to hide
var $limit = 10; // The number of characters to show
var $str = $elem.html(); // Getting the text
var $strtemp = $str.substr(0,$limit); // Get the visible part of the string
$str = $strtemp + '<span class="hide">' + $str.substr($limit,$str.length) + '</span>'; // Recompose the string with the span tag wrapped around the hidden part of it
$elem.html($str); // Write the string to the DOM
})
</script>
</head>
<body>
<p>Some lenghty string goes here</p>
</body>
</html>
【讨论】：
Jeff 我遇到了同样的问题，想将文本限制器添加到动态内容中，所以这是我的解决方案：
// TEXT CHARACTER LIMITER
$(document).ready(function() {
$.fn.textlimit = function()
{
return this.each(function()
{
var $elem = $(this); // Adding this allows u to apply this anywhere
var $limit = 22; // The number of characters to show
var $str = $elem.html(); // Getting the text
var $strtemp = $str.substr(0,$limit); // Get the visible part of the string
$str = $strtemp + '<span class="hide">' + $str.substr($limit,$str.length) + '</span> ...';
$elem.html($str);
})
};
});
// Call the text limiter above
$(document).ready(function() {
$('.someGenericClass .anotherClass').textlimit()
});
【讨论】：
我认为目的可以比上面解释的更容易解决
$(function(){
$(".title").each(function(i){
len=$(this).text().length;
if(len>10)
{
$(this).text($(this).text().substr(0,10)+'...');
}
});
});
上面的jquery代码会隐藏超过10个字符的div文本以及ads...在最后说明还有更多内容。
【讨论】：
jQuery(function(){ jQuery(".rs_rs_name").each(function(i){ len=$(this).text().length; if(len>45) { jQuery(this).text($(this).text().substr(0,45)+'...'); } }); });
$.fn.textlimit = function(limit)
{
return this.each(function(index,val)
{
var $elem = $(this);
var $limit = limit;
var $strLngth = $(val).text().length; // Getting the text
if($strLngth > $limit)
{
$($elem).text($($elem).text().substr( 0, $limit )+ "...");
}
})
};
**how to use**
$("#DivId").textlimit(60);
【讨论】：
HTML：
25 是最大长度。
<input type="text" name="Occupation" id="Occupation" value="" placeholder=""
onkeypress="limitKeypress(event,this.value, 25)" class="form-control" required>
Javascript：
function limitKeypress(event, value, maxLength) {
if (value !== undefined && value.toString().length >= maxLength) {
event.preventDefault();
}
}
【讨论】：