2011-02-02 2 views
1

내 게시물의 텍스트를 자르려고합니다.
나는 그것을 달성하기 위해 몇 가지 jquery plugins을 사용하지만 문제는 못생긴가
클라이언트 먼저 전체 텍스트로드 다음 자바 스크립트
의 코드는 텍스트을 절단 실행하고 결과에
효과가 잘려지기 전에 연결에 따라
에 따라 전체 텍스트를 볼 수있는 곳의 효과입니다.Howto는 div의 텍스트를 잘라냅니다

서버에서도자를 수 있습니까?
저는 codepressiter를 wordpress와 함께 사용하고 있습니다.
the_excerpt 또는 무엇인가를 사용하려고 생각했지만 우아한 것은 아닙니다.

아이디어가 있으십니까?

+0

가능한 중복 (HTTP :// text/4541412/limited-number-of-characters-displayed-in-table-cell) – Gordon

답변

0

당신이 더 많은 연결해야하는 경우이 jQuery 플러그인을 사용하는 것이 가능할 수 : Bodacity

이 당신이 수를 당신이 필요하면 "Read More"링크를 클릭하십시오.

텍스트가 큰 덩어리 인 경우 브라우저는 여전히로드합니다.

4

잘린 텍스트는 항상 서버에서 수행되어야합니다. 특히 텍스트의 큰 부분 인 경우.

+0

텍스트의 표시된 크기를 제한하려면이 작업이 어려워집니다. 줄 바꿈 및 HTML 서식이 잘린 텍스트가 표시되는 방식에서 역할을 수행하므로 상자 540 x 300px에 맞춰야합니다. – Jimbo

+0

-1 "항상"사실이 아닌 것에 대한 강한 노력입니다. –

3

substr_replace 당신

http://php.net/manual/en/function.substr-replace.php

이 작업을 수행합니다 - 편집으로 인해 새로운 정보에 -

좋아, 나는 이것이 당신이 다음 계신 생각 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>Temp</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
     $('#clippedmore a').click(function(){ 
      $('#clipped').css('height','auto'); 
      $('#clippedmore').hide(); 
     }); 
     }); 
    </script> 
    <style style="text/css"> 
     #clipped { height: 80px; overflow: hidden; } 
    </style> 
    </head> 

    <body> 
    <div id="clipped"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </div> 
    <div id="clippedmore"> 
     <p><a href="javascript:;">Show more...</a></p> 
    </div> 
    </body> 

</html> 
+0

+1 좋은데 텍스트의 길이가 100x100 div가 단어의 길이에 따라 100-120 문자를 사용한다고 가정하는 상수가 아닙니다. div의 모든 공간을 사용하고 싶습니다. mean –

+0

Ok. toddles2000에 표시된 overflow : hidden 메소드는 아마도 유용 할 것입니다. 문제는 텍스트 정렬을 사용하지 않으면 자르지 않는 문자 절반을 볼 수 있다면 정당화하는 것입니다. 조금 이상하게 보이지 않도록 글꼴 크기와 선 높이를 정확하게 지정해야합니다. –

+0

당신은 맞습니다. 그러나 나는 toddles에게 말했듯이 텍스트의 끝에 "더 많은"링크를 원하기 때문에 쉽지 않습니다. –

9

UI 용도로만 설정된 높이를 원하기 때문에 텍스트를 자르면 간단한 해결책은 div에서 컨텐츠를 감싸고 높이를 설정하고 ov를 사용하는 것입니다 erflow : 나머지를 숨기려면 숨김. 이것은 css 선택자를 사용하여 내용을 확장 할 수 있다는 점에서 장점이 있습니다.

html page 
<div class="mywrapper">your content goes here..</div> 

css file 
.mywrapper { 
overflow: hidden; 
width: 540px; 
height: 300px; 
} 
+1

SO 및 멋진 간단한 대답에 오신 것을 환영합니다! :) – acm

+0

+1 답변을 주셔서 감사합니다. 여기에있는 것은 내가 "더"링크를 삽입하려면 잘린 텍스트의 끝에 싶습니다. –

0

은 서버 측에서 PHP에 다음을 시도해보십시오

$test = 'something'; 
if(strlen($test)>12) { 
    echo substr($test,0,12)."..."; 
} else { 
    echo $test; 
} 
0

좋아, 그래서 이것이 내가 함께 넣어 무엇이며, 그것을 작동하는 것 같군 :

function truncate_html($s, $l, $e = '&hellip;', $isHTML = true) { 
$s = trim($s); 
$e = (strlen(strip_tags($s)) > $l) ? $e : ''; 
$i = 0; 
$tags = array(); 

if($isHTML) { 
    preg_match_all('/<[^>]+>([^<]*)/', $s, $m, PREG_OFFSET_CAPTURE | PREG_SET_ORDER); 
    foreach($m as $o) { 
     if($o[0][1] - $i >= $l) { 
      break;     
     } 
     $t = substr(strtok($o[0][0], " \t\n\r\0\x0B>"), 1); 
     if($t[0] != '/') { 
      $tags[] = $t;     
     } 
     elseif(end($tags) == substr($t, 1)) { 
      array_pop($tags);     
     } 
     $i += $o[1][1] - $o[0][1]; 
    } 
} 
$output = substr($s, 0, $l = min(strlen($s), $l + $i)) . (count($tags = array_reverse($tags)) ? '</' . implode('></', $tags) . '>' : '') . $e; 
return $output; 

} [테이블 셀에 표시되는 문자의 제한 번호]의

truncate_html('<p>I really like the <a href="http://google.com">Google</a> search engine.</p>', 24);