최소 너비, 최대 너비 CSS 가장 작은 너비를 사용하십시오

좋아, 그래서 내가 할 수있는 최선의 방법은 그 안에있는 내용을 기반으로 자동 크기 조정됩니다 DIV를 만드는 것입니다,하지만 가능한 가장 작은 너비를 사용해야합니다. 나는 이것을 어떻게하는지에 대한 단서가 없다.최소 너비, 최대 너비 CSS 가장 작은 너비를 사용하십시오

따라서 200px 미만의 문자가 3 개인 DIV 태그가있는 경우 div가 200px가되도록해야합니다. 텍스트가 더 많아지면 자동 크기를 지정하여 텍스트가 잘 맞도록하십시오.

은 *** CSS와 함께이 가능 *? ****

** UPDATE **

내가이 더 잘 설명 할 수 있다면 나를 보자. 나는 DIV있다 : 나는 일이 바라고 무엇

+++++++++++++++++++++++++++++++++ 
|-------------------------------| 
|-----text this longer text-----| 
|-------------------------------| 
+++++++++++++++++++++++++++++++++

텍스트가 변경되는 경우 아직 적어도 200 픽셀 폭 될 것입니다. 이처럼 :

+++++++++++++++++++++++++++++++++ 
|-------------------------------| 
|-------------text--------------| 
|-------------------------------| 
+++++++++++++++++++++++++++++++++

그러나 심지어 긴 텍스트 인 경우 다음 첫 번째 예는 200 픽셀 폭을지나 바깥쪽으로 계속 확장 할 것 : 공간의

++++++++++++++++++++++++++++++++++++++++++++++++++++++ 
|----------------------------------------------------| 
|-----text this longer texttext this longer text-----| 
|----------------------------------------------------| 
++++++++++++++++++++++++++++++++++++++++++++++++++++++

는 그러나, 나는 제한이 할 (제한 금액) 그것이 갈 수 있도록 나는 그것에 최대 너비를 넣어야합니다. 그게 의미가 있습니까? 아니면 더 많은 것을 명확히해야합니까? 100 % 화면 너비의 - 당신이 올바르게에 대해 물어하는지 이해하면

출처

2012-08-09 user1470118

자바 스크립트를 사용해야 할 수도 있습니다. – starbeamrainbowlabs

<div>은 블록 수준의 요소이기 때문에 폭을 명시 적으로 정의 할 수 있지만 내용에 맞게 자동 크기 조정되지 않습니다. <span>과 같은 인라인 요소는 내용에 맞게 자동 크기 조정을 수행하지만 의 CSS을 통해 너비 정의를 허용하지 않습니다. 이 문제를 해결하려면 <div>이 어떻게 든 테이블 셀처럼 동작하도록해야합니다.다음은 예입니다 :

CSS :

.widthlim { 
    min-width: 200px; 
    max-width: 1000px; 
    background-color: red; /*This is just for us to be able to see the width*/ 
    display: table-cell; 
    word-wrap: break-word; 
    word-break: break-word; 
}

HTML :

이

Example 1:<br/> 
<div class = "widthlim"> 
Hello 
</div> 
Example 2:<br/> 
<div class = "widthlim"> 
Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello 
</div> 
Example 3:<br/> 
<div class = "widthlim"> 
Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello 
</div>

(우리는 더 이상 완전히 블록 레벨있어 없기 때문에 <div>의 이전 <br/>의 추가했다 방법 참고) .
다음은 렌더링 할 때의 모습입니다. The above example rendered Firefox, Chrome 및 IE8 (IE8의 경우 DOCTYPE을 지정해야 함)에서 작동하는 것으로 보입니다. 그게 도움이 되었길 바래!