텍스트가 넘침 float div

작성하려고하는 유체 레이아웃에 문제가 있습니다. 내가 왜 오버플로를 얻을 수 없는지 궁금 해서요.이 사이트의 왼쪽 메뉴 텍스트에서 작동하지 않습니다.텍스트가 넘침 float div

여기에서 볼 수 있듯이, 왼쪽 메뉴 div 내에 포함하고 싶은 텍스트는 파란색으로 표시되어 있습니다. 오버플로 되어도 나머지 사이트는 푸시됩니다.

JS 빈 여기를 참조하십시오 : 당신의 도움에 대한 http://jsbin.com/OcoJEpe/2/edit?html,css,output

감사합니다.

제임스.

출처

2013-10-22 James Hatton

? 무슨 키와 관련이 있니? – DaniP

그리고 출력은 어떻게되어야합니까? 오버플로하려면 내용이 컨테이너보다 커야합니다. 컨테이너에는 제한이 없습니다. –

네, 맞습니다. 텍스트를 왼쪽 메뉴에 숨겨서 빨간색을 기본적으로 볼 수 없도록하고 싶습니다. (# 왼쪽 메뉴 텍스트가 페이지를 아래쪽으로 밀고 있습니다) –

overflow:hidden;이 작동하지 않는 이유는 텍스트의 크기로 인해 left-menu div가 확장 되었기 때문입니다. left-menu의 높이를 제한하는 코드 (css 또는 html)가 없습니다. 이 문제를 해결하는 데는 여러 가지 방법이 있지만 기본적으로 특정 높이로 이동하도록 div에 지시해야합니다.

출처

2013-10-22 15:49:56 jbaum012

해당 요소의 height은 기본값 인 auto을 사용하므로 내용이 확장됩니다. 이 작업 예를 들어, 당신은 단지 를 추가해야한다이 jsfiddle

출처

2013-10-22 15:50:34

당신은 왼쪽 메뉴에 높이를 추가해야합니다

당신은 약간의 높이를 지정해야 p는 height이고, 세트는overflow:hidden이다. 여기

는 HTML입니다

<p id="height"><span>This text is overflowing parent div...</span> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a odio ac nulla aliquet molestie. Cras aliquet metus eget vehicula vulputate. Donec eget nisl sit amet quam fringilla molestie. Vivamus elementum non justo quis consequat. Etiam quis quam eu nisi cursus aliquet eu et arcu. 
    </p>

과 CSS 경우에만 # 왼쪽 메뉴에 숨겨진 오버 플로우를 원하는

p#height{ 
     height:30px; 
     background:red; 
     overflow:hidden; 
    }

출처

2013-10-22 15:52:33 SaturnsEye

에서 봐,

#left-menu{height:200px;} //OR SOME NON-AUTO HEIGHT

출처

2013-10-22 15:54:25 David

텍스트가 넘침 float div

답변

관련 문제