나는 절대적으로 div 요소 ( .tooltip)와 그 .text안에 텍스트 ( max-width설정된) 가있는 다른 div ( )를 배치했습니다 . 의 left속성이 .tooltip충분히 크면 너비가 축소됩니다 ( right속성의 기본값 이 0 이기 때문에 추측 ). 내가 원하는 것은 처음 .tooltip에 .text(그것의 내용) 너비 를 존중하는 것입니다. 내가 시도한 것 :
의 폭 설정 tooltip에 fit-content- 이것은 기본적으로 내가 무엇을 달성하고자하는입니다 (스 니펫에 보여 주었다)하지만 (내가 지원이) IE에서 작동하지 않습니다. 그 너비가 없으면 .tooltip축소됩니다.
tooltip또는 고정 너비 설정 -div의 text텍스트 text가 매우 짧아서 빈 공간이 생기기 때문에 불가능 합니다.
반면에 텍스트는 정말 길 수 있으므로 white-space: nowrap비슷한 질문에서 제안한 것처럼 설정할 수 없습니다 .
.tooltip {
position: absolute;
border: 1px solid red;
left: 400px;
width: fit-content;
}
.text {
max-width: 200px;
}<div style="border: 1px solid green;width:500px; height: 500px; position:relative">
<div class="tooltip">
<div class="text">test test test test test test test test test</div>
</div>
</div>아이디어는 left번역 으로 대체하는 것 입니다.
.tooltip {
position: absolute;
border: 1px solid red;
left: 0;
transform:translateX(400px);
}
.text {
max-width: 200px;
}<div style="border: 1px solid green;width:500px; height: 500px; position:relative">
<div class="tooltip">
<div class="text">test test test test test test test test test</div>
</div>
</div>를 계속 사용하려면 left음수 여백을 고려하여 요소에 더 많은 공간을 제공하십시오.
.tooltip {
position: absolute;
border: 1px solid red;
left: 400px;
margin-right:-400px; /* Make it bigger enough, at least the same as left */
}
.text {
max-width: 200px;
}<div style="border: 1px solid green;width:500px; height: 500px; position:relative">
<div class="tooltip">
<div class="text">test test test test test test test test test</div>
</div>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다