텍스트가 넘칠 때 JQuery 마키 만들기

#box div 외부에 오버 플로우되는 텍스트에 마키 태그를 배치하는 Jquery 스크립트를 만들려고합니다. 텍스트는 분명히 30px보다 넓으며 div는 대부분의 텍스트를 숨 깁니다. 내 문제는 선택 윤곽 효과가 나타나지 않는 것입니다. 내 전체 코드는 다음과 같습니다.텍스트가 넘칠 때 JQuery 마키 만들기

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<style> 
#box { 
    width:30px; 
    overflow:hidden; 
} 
</style> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
</head> 

<body> 

<div id="box"> 
Overflooooooooooow 
</div> 

<script> 

$(function(){ 
    $box = $('#box'); 
    $box.children().each(function(){ 
    if ($box.width() < $(this).width()) { 
     $(this).wrap('<marquee>'); 
    } 
    }); 
}); 
</script> 
</body> 
</html>

감사합니다. 모든 도움을 주시면 감사하겠습니다.

출처

2014-05-13 Kelsey

_ ". 참고 또한 대부분의 jQuery 방법 같은 .children() 텍스트 노드를 반환하지 않습니다, 텍스트 및 주석 노드를 사용 .contents()을 포함한 모든 아동 얻을"_을 – j08691

div 안에있는 텍스트는 텍스트 노드 일뿐 폭을 얻을 수있는 요소는 아닙니다.

이

<div id="box"> 
    <div>Overflooooooooooow</div> 
</div>

편집 : 그것은 부모를 상속으로

이

죄송합니다, 내부 사업부에서 작동하지 않습니다 기본적으로 폭 단지 내부 블록 요소를 추가 할 수 있습니다. 스팬을 사용

<div id="box"> 
    <span>Overflooooooooooow</span> 
</div>

출처

2014-05-13 20:49:13 Mikk3lRo

그것을 구현 후에도 여전히 작동하지 않습니다. – Kelsey

예 ... 답변을 거의 게시했지만 수정했습니다. div는 'display : block'때문에 작동하지 않습니다. 범위는 기본적으로'display : inline'입니다. 내부 div를'display : inline'으로 설정하면 잘됩니다. – LcSalazar

이제 작동합니다. 감사합니다. – Kelsey

텍스트가 넘칠 때 JQuery 마키 만들기

답변

관련 문제