Question

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

通过javascript有一种简单的方法吗？我使用jQuery。

Answer 1

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

您可以使用PHP的substr()函数来准备字符串......

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

// This is a...

Answer 2

$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>

Answer 3

可能不是最优雅的解决方案，但应该有效......

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();
  }).

显示div的单个句子

3 个答案: