컨테이너 내에 텍스트 줄 바꿈

Question

나는 내부에 텍스트를 쓰는 컨테이너가 있습니다.

는

#webdd { 
    overflow: scroll; 
    width: 100%; 
    max-width: 100%; 
    max-height: 50%; 
    margin-top: 30%; 
    word-wrap: break-word; 
    text-align: center; 
    display: block; 
} 

#headerw { 
    font-size: 16px; 
    opacity: 0.9; 
    font-family: globerb; 
    font-weight: bold; 
    margin-bottom: 0px; 
    color: #333; 
    z-index: 9; 
} 

#descw { 
    margin-left: 30px; 
    margin-right: 30px; 
    font-size: 13px; 
    opacity: 0.6; 
    font-family: globerb; 
    font-weight: normal; 
    margin-top: 0px; 
    color: #333; 
    text-shadow: none; 
    text-align: justify; 
    z-index: 9; 
} 

이 문제는 페이지가 모바일 용으로, 그리고 누군가가 작은 높이를 가질 때 텍스트 (휴대폰에 표시되지 않음) 스크롤로가는 것입니다, 내가 뭔가를 원하는 다음과 같이 코드는 텍스트를 더 작게 만들거나 .. 어떤 식 으로든 감쌀 수 있습니다. #webdd는 내 주요 컨테이너이고 다른 헤더는 헤더이며 descw는 설명입니다.

아이디어가 있으십니까?

Answer 1

media queries을 사용하면 컨테이너의 높이에 따라 텍스트 크기가 변경됩니다.

@media screen and (max-width: 995px) , screen and (max-height: 700px) { 
     font-size:1.25em; 
    } 

그리고 지원 대상으로 삼는 화면 크기 조합.