显示div的单个句子

我想在末尾显示带有“...”的div的第一行，然后在点击时显示删除“...”的整个块。另外，我想知道如何在第二次点击时将其切换回紧凑的单行版本。显示div的单个句子

有没有一种简单的方法来通过javascript来做到这一点？我使用jQuery。

2012-07-12 savithraj

的三个点被称为省略号。有了这些信息，您可以轻松地运行搜索以查找jQuery elipsis插件，有很多可供选择的信息。 – 2012-07-12 13:24:54

这个功能实现起来非常简单...我不相信它可以保证一个插件... – Lix 2012-07-12 13:26:02

@Lix，不是那么回事。如果你想要一个在演示中看起来不错的方法，你将不得不使用substr（）以外的东西。它会在任何时候达到极限时切断文字。你将不得不知道你提前截断的句子并计数字符，所以它不会最终切断任何单词。 – 2012-07-19 13:11:50

我通常使用的方法是在HTML中将文本的两个版本（短和长）放在一起。一个是隐藏的（较长的一个），当你点击它，你的jQuery只需两个元素之间的交换......

您可以使用PHP的substr()功能来准备你的琴弦......

echo substr("This is a long line of text",0,9) . '...'; 

// This is a...

来源

2012-07-12 13:22:46 Lix

感谢您对Lix的快速反应。但是，根据字符数截断句子的问题是，有时文本显示为两个句子。有没有其他解决方案？ – savithraj 2012-07-12 13:38:44

@sav你能解释一下你的意思吗？如果你是两个句子，仍然会有一个简短的版本，当你改变文本时，会显示更长的2个句子......我错过了什么？ – Lix 2012-07-13 08:53:32

$string = "Two birds flew over the rainbow. The second bird had a stroke."; 
$shorten = substr($string, 0, strpos($string, '.')) . '...';

将文本缩短为第一句，假设您没有缩写标题。

jQuery也很简单。

<script> 
$(document).ready(function(){ 
    $('#toggle').hide(); 
    $('.toggle').click(function(){ 
     $('#toggle').toggle(); 
    }); 
}); 
</script> 
<?php echo $shorten; ?> 
<br /><a href="#" class="toggle">read more</a> 
<div id="toggle"><?php echo $string; ?></div>

来源

2012-07-12 13:27:16

感谢您的回应Marcus。但是，按字符数截断句子的问题是，有时文本显示为两行。有没有其他解决方案？ – savithraj 2012-07-12 13:48:06

我只截断一段时间的第一个实例。如果第一句中有多行，我只能假定文本已经打断了。在这种情况下，你可以说'$ shorten = substr（strip_tags（$ string），0，strpos（strip_tags（$ string），'。'））。 ” ...';' – 2012-07-12 13:49:26

可能不是最完美的解决方案，但应该工作...

div span { display:none; } 
div b { font-weight:normal; } 

<div>Blah blah blah blah<b>...</b> <span>blah blah blah blah blah</span></div> 


jQuery("div").toggle(function() { 
     $(this).find("b").hide(); 
     $(this).find("span").show(); 
    }, 
    function() { 
     $(this).find("b").show(); 
     $(this).find("span").hide(); 
    }).

来源

2012-07-12 13:33:26

但我的主要目的不是显示div的第一句话。我的目标是显示div中的第一行。 – savithraj 2012-07-12 13:45:11

显示div的单个句子

回答

相关问题