배경 이미지에 맞추기 위해 텍스트 크기 조정

Question

나는 더 긴 wordpress 게시물 제목을 자동으로 (986px로 고정 된) backround 이미지의 너비에 맞게 크기를 줄이려고합니다. 현재 제목이 너무 길면 마지막 단어가 문장 끝으로 잘립니다. 예를 들어 아래 사이트를 참조하십시오. http://www.nursingassistantdegree.com/earning-a-certified-nursing-assistant-degree-can-help-break-the-single-mom-poverty-cycle/

CSS 코드는 다음과 같습니다.

.networkNews_bg{ background:url(images/network_news_bg.png) no-repeat 0 0; width:986px; height:82px;} 
.networkNews_bg h2{ font:bold 35px/82px "Myriad Pro"; color:#2a2c2e; padding:0 20px;} 

비슷한 주제가 있지만 CSS의 자동 크기 조정과 관련이있는 것은 없습니다. 텍스트를 986px 크기에 맞게 자동으로 축소하려면 어떻게합니까?

미리 감사드립니다. 배경이

background: url(images/network_news_bg.png) bottom no-repeat; 

을하고 다음 훨씬 키가로 이미지를 편집하는

Answer 1

텍스트를 지정한 너비에 맞게 자동 조절할 수 없습니다. "em", "rem"또는 기타 관련 텍스트 크기 조정 단위를 사용하여 텍스트의 크기를 조정할 수 있지만이 모든 것이 너비가 아닌 텍스트 높이를 변경합니다. 크기 조정 대신 제목에 자동 줄임표를 추가하는 방법은 무엇입니까?

.ellipsis { 
    text-overflow: ellipsis; 
    overflow: hidden; 
    width: 986px; 
    height: 20px; 
    line-height: 20px; 
} 

제목 제목이 986px를 지나면 "..."으로 표시됩니다. 이것은 매우 간단한 해결책입니다.

일반적인 문제인 경우 글꼴 크기를 줄이는 것도 좋습니다.

편집 :

다음은 FF의 스냅 샷입니다. 이것이 제가 추가 한 것입니다. 글꼴 속성을 변경하지 않았습니다. 그러나 원할 경우 줄일 수 있습니다. 3 개의 새 속성이 필요합니다 : text-overflow, overflow, white-space. 공백은 특히 중요합니다.

스냅 샷 :

업데이트 2 :

그래서

networkNews_bg h2 { 
     text-overflow: ellipsis; 
     overflow: hidden; 
     wite-space: nowrap; 
     color: #2A2C2E; 
     font: 35px/82px "Myriad Pro"; 
     padding: 0 20px; 
} 

Answer 2

당신은 당신의 CSS를 수정해야합니다. 그 말이 맞으면 위쪽을 위로 반복하십시오. 그런 다음 높이 제한을 제거하고 줄 높이에 따라 스타일을 지정하십시오.