div를 확장하여 "read more"

Question

해결 방법을 찾고있는 사이트에서 문제가 발생했습니다. 게시물은 MySQL 데이터베이스에서 가져옵니다. 몇 줄이 포함되어 있으면 완전히 표시됩니다. 그러나 줄 수가 너무 많아서 (브라우저 화면에 더 많은 공간을 차지하는 경우) 점이 하나의 줄로 표시되도록하고 싶습니다 (예 : 너무 긴 게시물 ....)을 클릭하면 "더보기"옵션이 표시됩니다 (페이스 북, 트위터 등에서 볼 수 있듯이). 그것은 자바 스크립트 또는 jquery에 의한 클라이언트 측 솔루션이거나 PHP에 의해 서버 측에서 처리 될 수 있습니다. 귀하의 조언을 많이 부탁드립니다!

전체 포스트는 MySQL의에서 가져온 내가 곧바로 그것을 에코 :

<?php 
//code 
while($row=mysql_fetch_array($result)) 
{ 
    echo $row['posts']; 
} 
?> 

단순히 데이터베이스에서 전체 게시물을 가져오고 하란 여기에 휴식을 할 수있는 자바 스크립트 솔루션을 원하는 반향이 순간.

Answer 1

HTML & PHP :

<?php 
$text = '. . .'; 
$limit = 100; 
?> 
<div class="text"> 
    <?php 
    if (strlen($text) < $limit) { 
     echo $text; 
    } else { 
     echo substr($text, 0 , $limit); 
     echo "<br/><a href='#' onclick='showMore()'>read more</a>"; 
    } 
    ?> 
</div> 

jQuery를을 :

<script> 
    function showMore() { 
     var text = '<?php echo $text; ?>' 
     $(".text").html(text); 
    } 
</script> 

Answer 2

당신은 jQuery로 그것을 할 수 있습니다 : -

<div class="columns"> 
    your text goes here. Try long text here.... 
</div> 

a.morelink { 
     text-decoration: none; 
     outline: none; 
    } 

    .morecontent span { 
     display: none; 
    } 

    .comment { 
     width: 400px; 
     background-color: #f0f0f0; 
     margin: 10px; 
    } 

<script> 
var showChar = 120; 
     var ellipsestext = "..."; 
     var moretext = "more"; 
     var lesstext = "less"; 

     $(".columns").each(function() { 
      var content = $(this).html(); 

      if (content.length > showChar) { 
       var first = content.substr(0, showChar); 
       var second = content.substr(showChar - 1, content.length - showChar); 

       var html = first + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + second + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>'; 

       $(this).html(html); 
      } 
     }); 

     $(".morelink").click(function(){ 
      if($(this).hasClass("less")) { 
       $(this).removeClass("less"); 
       $(this).html(moretext); 
      } else { 
       $(this).addClass("less"); 
       $(this).html(lesstext); 
      } 
      $(this).parent().prev().toggle(); 
      $(this).prev().toggle(); 
      return false; 
     }); 
</script> 

Answer 3

는 당신이 시도 할 수 있습니다.

<?php 
    $str = 'simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's'; 
    $limit = 40; 
    if(strlen($str)>$limit){ 
     $stringCut = substr($str, 0, $limit); 
     $serRpos = strrpos($stringCut, ' '); 
     $first_part = substr(substr($str, 0, $limit), 0,$serRpos); 
     $last_part = substr($str,$serRpos); 
     echo $first_part; 
     echo '<span style="cursor: pointer" onclick="showText(this)"> ...<span class="hide-text" style="display: none;">'.$last_part.'</span></span>'; 
    } 
    else{ 
     echo $str; 
    } 
?> 

및 스크립트 (나는 jQuery를 사용)

<script type="text/javascript"> 
function showText(e){ 
$(e).html($(e).find('.hide-text').html()); 
} 
</script>