콘텐츠로 너비를 설정하는 방법은 무엇입니까?

Question

나는 아이콘이 : 당신은 문제가, 그 폭은 부모 요소가되는 점입니다 볼 수 있듯이이 가능

입니다 : 호버 느릅 나무에

는 툴팁이 나타납니다 툴팁의 너비는 자동으로 내용에 의해 결정됩니까?

HTML :

<div class="icon"> 
    <span class="tooltip">Debian: 20%</span> 
    <span class="icon-lin-debian" style="opacity:0.2"></span> 
</div> 

CSS :

div.icon{ 
    position:relative; 
    display: inline-block; 
} 

span.tooltip { 
    display: none; 
    position: absolute; 
    line-height: 20px; 
    width: 100%; 
    left:0; 
    right:0; 
    padding: 10px; 
    font-size: 14px; 
    text-align: center; 
    background: #000; 
    border: 1px solid #353535; 
    border-radius: 5px; 
    top: -45px; 
    z-index: 100; 
} 

span.tooltip:after { 
    content: ""; 
    position: absolute; 
    width: 0; 
    height: 0; 
    border-width: 10px; 
    border-style: solid; 
    border-color: #353535 transparent transparent transparent; 
    top: 40px; 
    left: 20px; 
    z-index: 100; 
} 

P.S. 다른 단어도 있으므로 혼자서 너비를 설정할 수 없습니다.

Answer 1

기본적으로 하위 요소는 부모 요소 안에 남아 있습니다. 이는 컨텐츠를 랩핑하거나 상위 요소를 확장하여 수행됩니다.

이 경우 부모에 명시적인 너비 세트가 없기 때문에 부모 요소가 확장되어 자식 요소가 포함됩니다. 자식 요소가 부모 요소를 넘어서 확장 된 것처럼 보이게하려면 자식 요소가 너무 넓어 지도록 확장하지 않으려면 부모 요소 ’의 너비를 설정해야합니다. 그러면 자식을 설정해야합니다 요소 ’은 부모보다 너비가 넓습니다. ’. 그런 다음 부모 요소에 overflow: visible;을 지정하여 하위 요소가 부모 외부로 확장되는 경우에도 자식 요소를 완전히 표시 할 수 있습니다.