2013-03-29 4 views
5

문제와 단어 잘림은 간단하다 :PHP - HTML

내가 데이터베이스에 HTML 데이터를 저장하고, tinyMCE 사용. 그런 다음 홈 페이지에서 데이터베이스에 삽입 한 5 개의 최신 게시물을 표시하고 있습니다. 각 게시물을 지정된 길이로 잘라내어 초과하는 경우 continue reading 링크를 붙여 넣으려고합니다 (여기에서 부드러운 자르기 일 수도 있고 딱딱하지 않아도됩니다).

php의 wordwrap 함수로 문자열을 자르기는 쉽지만 문자열은 html로 구성되어 있으므로 잘못된 위치에서 잘라내어 html 코드를 망치고 싶지 않습니다.

그래서 질문입니다 :이 간단한 자르기 쉬운 방법 (CSS, 자바 스크립트 솔루션이 될 수 있습니까?) 또는 이러한 기본 기능을 구현하기 위해 많은 수표를 가진 긴 함수를 작성해야합니까? 나는 DOM 클래스를 사용하려고 생각했지만 기능을 만들기 전에 저는 여러분에게 물어보고 싶었습니다.

편집

스타일링 나에게 필수적이다. 따라서 태그를 제거 할 가능성은 없습니다.

미리 감사드립니다.

+0

참조 : http : //stackoverflow.com/questions/4682878/apply-wordwrap-to-html-content-excluding-html-attributes – Arvind

+0

페이지가 이미 다른 탭에서 열렸습니다. 사실 저는 그 게시물에서 DOM 아이디어 :) @ Arvind –

답변

2

한 가지 가능한 솔루션이 HTML의 스타일이 중요하지 않은 경우 당신은 당신이 원하는 목적지까지 줄일 수 있도록, 태그를 제거 할 수 : CSS3 브라우저 용 http://php.net/manual/es/function.strip-tags.php

또 다른 해결책은, 텍스트 오버 플로우를 사용하는 것 이에 대한 자세한 내용 : http://davidwalsh.name/css-ellipsis

+0

불행히도 첫 번째 옵션은 불가능합니다. 두 번째 옵션에 대해서는 이미 고려했습니다. 하지만 여전히, 어떻게 하나의 CSS를 사용하여 링크를 읽고 계속 추가 할 수 있습니까? –

0

당신이 jQuery를

자바 스크립트

를 사용하는 가정
 $(function() { 
     $('p').filter(function() { 
      return $(this).height() > 50; 
     }).addClass('collapsed').css('position', 'relative').append('<a href="#" class="expand">read more</a>'); 
     $('.expand').on('click', function(){ 
      if($(this).parents('.collapsed').length) 
       $(this).parents('.collapsed:first').removeClass('collapsed') 
      else 
       $(this).parents(':first').addClass('collapsed') 

     }) 
    }) 

CSS를

.collapsed{overflow: hidden; height: 20px; margin-bottom: 10px; position: relative} 
.expand{position: absolute; right: 0; bottom: 0; background: #fff; padding: 0 0 0 15px;} 

개념의 단지 증거. JS 최적화가 필요합니다

+0

나는 이미 그런 플러그인을 발견했다 : http://dotdotdot.frebsite.nl/. jQuery의 유일한 문제는 페이지가로드 될 때까지 기다렸다가 내용이 처음로드 될 때까지 기다린 다음 자르기 (오버플로를 사용할 때조차도 : 숨겨진 텍스트가 표시되고 표시가 어색하게 렌더링 됨)입니다. 완벽한 솔루션은 아니지만 더 나은 솔루션을 찾을 수 없다면이 대답을 올바른 것으로 받아 들일 것입니다. 제안 해 주셔서 감사합니다. –