div가 콘텐츠에 맞지 않습니다.

Question

긴 단어가 포함되어있을 때 div가 콘텐츠에 맞지 않는 문제가 있습니다. 단지 너비가 최대가됩니다.

스크린 샷 :

http://img687.imageshack.us/img687/3253/photondf.png

나는 DIV 자바 스크립트없이 콘텐츠와 같은 폭을 먹고 싶어.

HTML

<div class="div"> 
    <p>fkjdajfkdjfkdjfkdfjkdfjkdfjdfdjkfkjfdkdfioiewtiovvuiocuvicxvocxvuiocxvucioxbuvbhxjk 
    civuiozxviopucvicvuvjcizoxvopcxvpiovxzijpvxzicovpzvjijopcvzxpvjiocvpjzvicvzpjvci.</p> 
<div> 

CSS

정확하게 DIV 할려고 무엇

.div { 
    float: left; 
    background:red; 
    max-width: 900px; 
} 

Answer 1

? 콘텐츠의 크기에 맞춰 크기를 조정하고 싶었지만 900px 이하로 만들었습니까?

Answer 2

width: auto;을 시도하고 div가 900px보다 커지지 않게하려면 max-width으로 유지하십시오.

Answer 3

음, 여기에는 몇 가지 문제가 있습니다.

1. p의 내용은 전혀 공백이 없습니다. 즉, 여러 행에 단어를 "분할"할 수 없습니다. 그리고 귀하의 사업부는 실제로 정확한 너비를 가지고 있습니다.

2. 실제로 여러 줄로 나누고 싶지 않은 경우가 아니면. div에 overflow을 auto 또는 hidden으로 정의 할 수 있습니다. 이 경우 auto은 스크롤바를 추가하고 hidden은 단순히 넘어갈 내용을 숨 깁니다.

3. 는 어느 p 또는 div, 당신은 실제로 CSS3에 줄 바꿈을 강제 할 수 있습니다에 overflow 경우 http://www.w3schools.com/cssref/css3_pr_word-wrap.asp

4. 당신은 DIV의 폭을 정의하기 때문에, 정말 항상 폭 것을 결코 더 사용했다. (넘치는 텍스트는 div보다 큽니다). 레이아웃 크기 및이 div 주위의 다른 div 위치를 계산할 때 넘칠 수있는 텍스트를 고려해서는 안됩니다.

Btw와 같이 실제로 긴 문자열은 실제로 "사용 사례"가 아닙니다. 실제로 공간이있을 때 문제가있는 경우입니다. 그 대신 여기에 붙여 넣어야합니다.

편집

긴 단어와 내용을 "적합"할 수 귀하의 사업부, 그것은 최대 폭 가능하고 최대 폭에 도달 할 때 다음, 그것이 다른 줄로 줄 바꿈됩니다 확산됩니다. 단어가 div보다 크면 오버플로됩니다.

편집이

당신이 정말하고 싶은 경우는 방법이있다. 그러나 이것은 꽤 추악합니다. 각 긴 단어 다음에 <br />을 추가해야합니다. 템플릿 엔진 내에서 텍스트를 전달하는 경우 <br />을 공백으로 바꿀 수도 있습니다. 그러나 솔직히 말해서, 그렇게하지 마십시오.