CSS : div의 텍스트 내용이 패딩에 오버플로되는 것은 맞습니까?

Question

div 안의 여백에 텍스트가 없어 질 것으로 예상됩니다. 그러나 다음 html/css가 주어지면 내용 텍스트가 패딩으로 넘치게됩니다.

<div class="foo">helloworld</div> 

.foo { 
    float: left; 
    overflow: hidden; 
    background: red; 
    padding-right: 10px; 
    width: 50px; 
    border: 1px solid green; 
} 

텍스트가 50px 크기와 10px 패딩으로 오버플로됩니다. 그게 설계된거야? 그렇다면 그것은 꽤 바보 같다 - 패딩은 물건을 가지고 있다면 패딩되지 않습니다! 아니면 내가 잘못하고있는 것일까 요?

감사합니다, CSS 초보자.

Answer 1

올바른 동작입니다. overflow: hidden상자 외부로 확장되는 콘텐츠를 잘라냅니다. Padding은 안에 있습니다. 상자이므로 내용이 행복하면 해당 공간으로 행복하게 넘칠 것입니다.

:

(source)

효과를 얻으려면 당신이 목표로하는 것은, 하나 개의 솔루션은 다음과 같이, 다른 사업부에 div.foo 포장 대신 하나의 배경 설정입니다

<div class="foowrapper"> 
    <div class="foo">purrrrrrrrr</div> 
</div> 

.foo { 
    overflow: hidden; 
    width: 40px; 
} 
.foowrapper { 
    padding-right: 10px 
    background: red; 
    border: 1px solid green; 
} 

Answer 2

div의 너비를 50px로 제한하여 텍스트가 패딩에 스며 들기 때문입니다. 해당 width 문을 제거하면 div가 그 안에있는 txt 크기로 확장 및 축소됩니다.

<div class="foo">helloworld</div> 

.foo { 
    float: left; 
    overflow: hidden; 
    background: red; 
    padding-right: 10px; 

    border: 1px solid green; 
} 

희망이 도움이됩니다.

Answer 3

이 작업을 볼 수있는 유일한 방법은 너비를 없애는 것입니다. 50px ... 그저 난처한 것만 큼!?

Answer 4

이렇게하려면 두 개의 div (기본 주 하나와 래퍼 하나)를 만들었습니다. 내부 메인 div의 높이를 정의하고 오버플로를 숨기고 결국 문제가 해결되었습니다. 여기 코드는 다음과 같습니다

div.wrap { 
    padding: 10px 10px 14px 10px; 
    border:1px solid #000000; 
    width: 200px; 
    height: 70px; 
} 
div.main { 
    line-height: 1.3em; 
    overflow:hidden; 
    width: 200px; 
    height: 60px; /* PLAY WITH THE HEIGHT so that you can essentially use it to cover up the overflow */ 
} 

    <div class="wrap"><div class="main">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor labore et dolore magna aliqua. Ut enim ad minim veniam.</div></div> 

래퍼는 패딩 (다른 속성들) 경계가 있습니다. main에는 height와 overflow 속성이 있습니다. 이것은 문제를 해결하는 속성입니다. 자유롭게 시험해보십시오. 얼마나 많은 단어가 주 사업부에 추가 되더라도 부분적으로 또는 전혀 표시되지 않을 것입니다. 크로스 브라우저도.

Answer 5

또 다른 접근법은 외곽선을 의사 패딩으로 사용하는 것입니다. 먼저 요소의 너비를 10 픽셀 씩 줄입니다 (외곽선이 앞으로 펼쳐지는 추가 금액을 고려해야 함). 그런 다음 요소에 10px의 단색 빨강 윤곽선을 추가하십시오. 개요는 '숨겨진'텍스트를 포함합니다.

foo의 오른쪽에 표시되는 요소가있는 경우 오른쪽 여백에 10px를 추가해야합니다 (외곽선이 일반 너비 확장처럼 옆으로 밀리지 않으므로).

.foo { 
    float: left; 
    overflow: hidden; 
    background: red; 
    padding-right: 10px; 
    width: 40px; 
    border: 1px solid green; 
    outline-right: 10px solid red; 
    margin-right: 10px; 

} 

Answer 6

방금이 문제에 부딪 혔고 작동 방식이 마음에 들지 않았습니다. 아무리 큰 고양이가 있더라도 패딩은 항상 상자와 상자 사이에있게됩니다! 따라서 overflow : hidden을 사용할 때 내용이 패딩에 도달하면 숨겨져 야합니다.

테두리가 필요한 경우에는 작동하지 않지만 일부 (me)의 경우에는 테두리가 안쪽 여백으로 사용됩니다.

<div class="foo">helloworld</div> 

.foo { 
    float: left; 
    overflow: hidden; 
    background: red; 
    padding-right: 0; /* Removed the padding. */ 
    width: 50px; 
    border-right: 10px solid red; /* 10px, background color or transparent. */ 
    box-sizing: border-box; /* I prefer this one too.. */ 
}