얻기 원하는 분 너비/행 즉시 행동

Question

내가 다음과 같이 변수 텍스트 행동하는를 포함하는 <div>를 얻기 위해 수행해야

• 폭은 항상 최소한 400 픽셀입니다;
• 단어는 줄 사이에서 깨지지 않지만 줄은 단어 경계에서 깨질 수 있습니다.
• 텍스트는 div의 테두리를 결코 오버플로하지 않습니다. 즉, 매우 긴 단어와 같은 콘텐츠를 수용하기 위해 너비가 늘어납니다.
• 가능하면 폭은 정확히 400px입니다. 특히 짧은 단어가 포함 된 긴 단락의 경우 너비는 정확히 400px 여야합니다.

가장 가까운 것은 display: inline-block; min-width: 400px;이지만 짧은 단어가있는 긴 단락은 여전히 ​​너비를 늘립니다.

Answer 1

당신은 당신의 div처럼 행동 할 테이블/테이블 셀. 이 모든 명시된 요구 사항을 충족해야

:

.box { 
    width: 400px; 
    display: inline-table; /* table|inline-table|table-cell */ 
    word-wrap: normal; 
} 

데모 : https://jsfiddle.net/cqo9yupw/

Answer 2

텍스트가 DIV 너비를 확장하지 않게하려면 최대 너비로 이동해야합니다.

Answer 3

나는 다음과 같은 CSS를 시도 제안 :

#container { 
    width:400px; 
} 


@media screen and (min-width:401px) { 

    #container { 
     width:auto; 
    } 
} 


@media screen and (max-width:399px) { 

    #container { 
     width:auto; 
    } 
} 

아이디 '용기'있는 사업부는 페이지의 모든 부분을 캡슐화하는 데 사용되어야한다. 이 폭은 400px로 설정되었습니다. 이제 사용자가 확대하거나 축소하면 너비가 자동으로 사용자의 창에 맞게 조정됩니다. @media 섹션에있는 단락의 ID를 배치하고 자동으로 조정해야합니다.

는 예를 들면 : @media 화면과 (최소 폭 : 401px) 대신 {

#container { 
    width:auto; 
} 


} 


@media screen and (max-width:399px) { 

#container { 
    width:auto; 
} 

#paragraph { 
    width:auto; 
} 
} 

Answer 4

시도 인라인 테이블 : 당신은 말을하는지

.mydiv{ 
    display:inline-table; 
    width:400px; 
    border:1px solid red; 
    word-wrap:normal; 
    word-break:keep-all; 
}