이 텍스트가 div 태그를 손상시키는 이유는 무엇입니까? 그것을 고치는 방법?

난 그냥 div의 너비와 높이를 정당화하고 텍스트가 안에있을 것이라고 생각하지만, 텍스트가이 경우에 밖에 나가는 이유를 모르겠다. 왜? 그것을 고치는 방법? 나는 텍스트를 원하는 DIV에 줄 바꿈되어이 텍스트가 div 태그를 손상시키는 이유는 무엇입니까? 그것을 고치는 방법?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>Content Area Prototype 1</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
     <link rel="stylesheet" type="text/css" href="content.css" />  
    </head> 

    <body> 
     <div class="test">  zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz 
     </div> 
    </body> 
</html>

이것은 "content.css"

* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    width: 480px; 
    height: 680px; 
    margin: 0 auto; 
    overflow: auto-scroll; 
    background-color: #212121; 
    font-family: "Segoe UI", sans-serif; 
} 

.test { 
    padding: 0.3em; 
    margin-bottom: 0.5em; 

    background-color: #fff; 
    border: 0.3em solid #59922B; 
    border-radius: 1.2em; 
}

업데이트입니다. 오버플로 : 숨겨진 작동하지 않습니다.

업데이트 : 왜 단어 줄 바꾸기가 기본값이 아닙니까?

출처

2011-09-02 Emerald214

나는 오버플로 : 숨김을 권할 수 있습니다. – Teneff

오버 플로우 : 숨김은 텍스트를 잘라 버립니다. 보기 좋지 않은 것 외에도 중요한 정보를 숨길 수 있습니다. '말장난 (word-wrap) '이 더 나은 해결책이다. –

산 세리프가 아니라 산 세리프가 필요합니다 ... – PhiLho

체크 아웃 .test CSS 클래스에 word-wrap: break-word;을 추가하여 word-wrap CSSproperty (docs)

은 텍스트가 컨테이너로 제한된다

http://jsfiddle.net/K9tmT/

출처

2011-09-02 14:24:24

이 방법이 효과가 있지만 단어 감싸기가 기본값이 아닌 이유를 모르겠습니다. 나는 그것이 div에 포함되어 있으므로 논리적으로 단어를 감싸 야한다고 생각합니다. – Emerald214

와우, 당신은 나를 위해 너무 빠르며 유용한 링크도 제공합니다 ... +1 – PhiLho

기본값은 '보통'입니다. 이것은 자연 단어 장벽, 즉 공간에서만 단어를 깨뜨릴 것입니다. 정말로 긴 텍스트를 컨테이너에 넣으면 라인이 깨지는 자연스러운 위치는 없습니다. 생각해보십시오. 브라우저가 "zzzzz ... 등"을 어기는 것이 어떨지를 어떻게 알 수 있습니까? 예제는 간단하지만 긴 단어의 경우 매우 중요 할 수 있으며 브라우저는 div보다 텍스트를 더 중요하게 생각합니다. 'break-word'라고 말하면, 단어를 "깨는"것을 의미한다고해도 용기 크기를 대신하기 위해해야 할 일은 "허락"합니다. –

overflow: hidden;

을 추가하는 시도

또는

overflow: scroll;

는 를 .test 및/또는 .test

에

overflow: hidden;이 경우 실시 예의 사용 될 수

출처

2011-09-02 14:25:50

그건 div에 가로 스크롤 막대를 만들 것입니다 ... 불쾌한보고, 모바일에서 사용하기가 어렵습니다. –

'숨김'은 스크롤바를 만들지 않으며, '스크롤'은 스크롤바를 만들지 않습니다. 유스 케이스에서 어느 것을 사용 하는가. –

CSS overflow 속성 .test 위해 본체로부터 높이와 너비를 이동하려면 http://jsfiddle.net/EjFL5/

출처

2011-09-02 14:27:04

텍스트가 분리되지 않으므로 CSS에서 단어 줄 바꿈을 break-word로 설정해야합니다. 그 텍스트의 중간에 공백을 넣으면 2 줄로 나뉘어집니다. MS 워드가 줄을 가로 질러 한 단어를 깨지 않게하는 방법 뒤에있는 동일한 원리입니다.

출처

2011-09-02 14:27:32

이 텍스트가 div 태그를 손상시키는 이유는 무엇입니까? 그것을 고치는 방법?

답변

관련 문제