顯示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的單個句子

回答

相關問題