"more"링크가 클릭 될 때까지 텍스트를 자르는 방법은 무엇입니까?

필자는 긴 일련의 단락을 가지고 있으며 각 줄을 2 줄 (50 자)까지 트리밍하고 "more"링크를 클릭하면 전체 단락이 표시됩니다."more"링크가 클릭 될 때까지 텍스트를 자르는 방법은 무엇입니까?

프로토 타입 라이브러리와 레일을 사용하고 있습니다.

두 div로 단락을 지우고 더 많이 클릭하면 다른 것을 보여주는 것으로 이상적입니다. 아니면 유일한 방법입니까? 내가 jQuery를 남자니까

2009-11-26 dMix

스팬에 문제가 있습니까? 이 설정은 숨겨진 span 태그에서 초과를 감싸는 것입니다. 재사용이 가능하도록 좋은 도우미 방법으로 전체 작업을 래핑 할 수도 있습니다.

가정 프로토 타입 :

def sample_with_more(body, html_options = {}) 
    more_link = link_to_function(" More...", "$('more').hide(); $('hidden').show();', :id => 'more') 


    content_tag(:div, html_options) do 
    body[0..49] + more_link + 
     content_tag(:span, body[50..-1], :style => "display:none", :id => "hidden") 
    end 
end

출처

2009-11-27 05:32:44 EmFi

, 여기에 몇 가지 사이비 코드를입니다

선택을 포함하고 포장
선택 요소 <button>more</button>
후 JS와
삽입은 more-text
제거 버튼에 대한 자세한 공상 display: block 또는 뭔가를 설정하는 클릭 이벤트 버튼을 추가 또는 변경 의 텍스트를 'less'로 변경하고 필요한 코드를 변경하십시오.

출처

2009-11-26 23:26:47 alex

div에 텍스트를 입력하고 높이를 원하는 높이 (오버플로 : 숨김)로 설정하십시오. 더 많은 링크를 클릭하면 div 높이를 div.scrollHeight로 설정합니다. 당신이 jquery 또는 mootools를 사용한다면 당신은 깔끔한 전환을 던질 수 있습니다.

<div id="myText" style="overflow:hidden; height:50px;">Text here...</div> 
<a href="javascript:;" onclick="showMore()">more</a> 

<script type="text/javascript"> 
function showMore() { 
    var mydiv = document.getElementById('myText'); 
    mydiv.style.height = mydiv.scrollHeight; 
} 

// or with a transition (mootools) 
function showMoreTransition() { 
    new Fx.Tween($('myText'), { 
     duration: 1000 
    }).start('height', $('myText').getScrollHeight()); 
} 
</script>

출처

2009-11-26 23:33:24 Rob

흥미로운 방법입니다 .... 문제는 마지막 줄이 반으로 자르면 어떻게 될까요? 좋아 보이지 않을거야. – mpen

단락의 줄 높이를 기준으로 높이를 선택하여 줄 사이의 간격을 확실하게 줄일 수 있습니다. – Rob

위의 답변 브라우저의 전체 텍스트를 보내 가정, 다음은 수직으로 클리핑하여 일정 금액을 표시 할 수 있습니다. 실제로는 텍스트를 잘라내는 것이 특정 양의 문자를 잘라내는 것처럼 보이기 때문에 실제로는 그리 좋은 방법이 아닙니다.

초기 프로젝트에서 필자는 긴 텍스트 목록을 가지고 있었으며 전체 텍스트로 전체를 브라우저로 보내지 않았습니다. 여기에서 유의해야 할 중요한 점은 텍스트에 제어 또는 이스케이프 문자 (예 : HTML, BBCode, HTML-Entities 등)가 포함되어있어 특별히 신경 써야하는 경우입니다.

절반으로 줄인 HTML 태그를 제공하지 않고 작은 태그 태그 파서를 작성하고 예를 들어. 굵게, 기울임 꼴로 화면 레이아웃의 나머지 부분을 망칠 필요가 없습니다.

또한 일반적으로 원하는 것이 아닙니다. 즉, 화면 너비가 다르거 나 텍스트에 줄 바꿈 문자가있는 경우 두 줄의 텍스트를 가져올 수 없습니다.

출처

2010-09-13 19:39:34 Zefiro

"more"링크가 클릭 될 때까지 텍스트를 자르는 방법은 무엇입니까?

답변

관련 문제