CSS : 텍스트 길이에 따라 가변 글꼴 크기

Question

font-size 매개 변수를 텍스트 길이에 따라 만들 수 있습니까? 물론 JavaScript로이 작업이 가능하다는 것을 알 수 있었지만 원하지 않습니다. ;)

나는 140px 너비와 높이를 가진 상자가 있습니다. 콘텐츠는 100px w + h 여야합니다 (상자 채우기 : 20px). 내 텍스트는이 100px 너비를 사용해야합니다. 또한 페이지 (AJAX)의 텍스트 변경시 텍스트는 너비 = 100px에 지정되어야합니다.

그럴 수 있습니까?

Answer 1

미리 텍스트 길이를 알고 있다면 CSS의 화면 크기에 따라 미디어 쿼리를 설정하여 글꼴 크기를 적절히 맞출 수 있습니다.

@media (max-width: 367px) { 
    .myContainer { 
    font-size: 8px; 
    } 
} 
@media (min-width: 368px) and (max-width: 1024px) { 
    .myContainer { 
    font-size: 12px; 
    } 
} 
@media (min-width: 1025px) { 
    .myContainer { 
    font-size: 16px; 
    } 
} 

동적으로 서버 측 기술로 텍스트를 생성하는 경우 텍스트의 길이를 볼 수와 크기에 대한 적절한 클래스를 글꼴 설정 할 수 있어야한다 :

// Example pseudo-code to illustrate the point... 
int len = myText.length(); 
if (len > 2000) { 
    setOutputClass("smallestSize"); 
} else if (len > 1000 && len < 2000) { 
    setOutputClass("mediumSize"); 
} else { 
    setOutputClass("largestSize"); 
} 

그리고 그와

대응을 당신의 CSS에서 클래스 규칙 :

.smallestSize { 
    font-size: 8px; 
} 

.mediumSize { 
    font-size: 12px; 
} 

.largestSize { 
    font-size: 16px; 
} 

나는, CSS 내의 텍스트의 길이를 결정하는 방법이 없습니다 확신 그래서 궁극적으로 당신은 자바 스크립트 또는 approac를 사용하도록 강제 할 수있다 솔루션과 약간 다르게.