텍스트가 절대 배치 컨테이너 안에 배치되지 않았습니다.

절대적으로 배치되고 내부에 div3가있는 max-width: 200px; 인 툴팁을 만들었습니다. 그러나 div 내의 텍스트는 다음 줄로 줄 바꿈되지 않습니다. 텍스트에 공백이 있어도 컨테이너 외부로 나가기 때문에 단어 분리 문제가 아닙니다.텍스트가 절대 배치 컨테이너 안에 배치되지 않았습니다.

편집 : 아래 이미지 참조 툴팁은 자신의 트리거 요소의 title 속성에서 텍스트에 당기는 그 문제가 될 것으로 보인다. 내용이 하드 코딩 된 경우 텍스트가 잘 랩핑됩니다.

<div class="tooltip"> 
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada, lectus eget gravida eleifend, odio libero hendrerit elit.</div> 
</div>

그리고 CSS :

enter image description here

다음은 HTML의

.tooltip{ 
    padding: 10px; 
    position: absolute; 
    background: #303030; 
    font-size: .9em; 
    color: #ccc; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.4); 
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.4); 
    box-shadow: 0 5px 10px rgba(0,0,0,.4); 
} 

.tooltip div{ 
    max-width: 200px; 
    border: 1px solid red; /* See where element is */ 
}

이 너무 분명한 것 같다,하지만 난 문제가 무엇인지 생각할 수 없다. 어떤 도움을 주시면 감사하겠습니다.

감사

출처

2012-12-21 scferg5

여기 http://jsfiddle.net/j08691/EqyWz/ – j08691

을 잘 포장 우리에게 완전한 코드를 표시하는 것 같아 보인다 표시 한 코드 부분과 관련이 있습니다. –

아, 그것이 무엇인지 찾아 냈습니다. 툴팁은 트리거 요소의 title 속성에서 컨텐츠를 가져옵니다. 콘텐츠에 하드 코딩 만하면 잘 처리됩니다. 그게 왜 효과가 있을지 모르겠지만 ... – scferg5

그것은 아마도 당신이 .tooltip 요소에 텍스트를 주입하고있는 방법을 함께 할 수있는 뭔가가. 이 같은 (jQuery를 사용)를보십시오 : 문제가 아닌 것처럼

$('.trigger').on('click', function() { 
    $('.tooltip div').html($('.trigger').attr('title')); 
});

http://jsfiddle.net/DyxkA/

출처

2012-12-22 09:32:16

텍스트가 절대 배치 컨테이너 안에 배치되지 않았습니다.

답변

관련 문제