단일 행 디스플레이의 글꼴 크기를 프로그래밍 방식으로 결정

Question

페이지에 기사를 표시하고 있습니다. 기사 제목은 때로는 두 줄로 넘치고 두 번째 줄에는 한 단어 만있을 수도 있습니다. 이것은 매우 바람직하지 않습니다. jQuery/CSS를 사용하여 제목을 한 행에 유지하기 위해 프로그래밍 방식으로 새로운 글꼴 크기를 결정하는 가장 좋은 방법은 무엇입니까?

Answer 1

해킹의 종류하지만를 글꼴 크기를 축소 : 이런 식으로 뭔가가 당신을 얻을 것이다 닫기. 그것은 아마도 tweeking 좀 더 필요합니다. 기본적으로 요소를 복제하고 클론의 텍스트를 & nbsp로 설정하여 한 줄의 높이를 결정합니다. 그런 다음 요소의 글꼴 크기가 대상 높이보다 작아 질 때까지 줄입니다.

이 기능을 부모의 resize()에 연결해야합니다.

$(document).ready(function() { 
    $(".shrink").each(function() { 
     var targetHeight = $(this).clone().html(" ").insertAfter($(this)); 

     while ($(this).height() > targetHeight.height()) { 
      $(this).css("font-size", parseInt($(this).css("font-size")) - 1); 
     } 

     targetHeight.remove(); 
    }); 
}); 

Answer 2

저는 여기에서 추측하고 있습니다 - JS를 사용하여 텍스트 컨테이너의 높이를 확인한 다음 필요한 경우 글꼴 크기를 줄이면됩니까? 변경으로 인해 페이지 내용의 크기가 조절됩니다.

Answer 3

제목에 몇 개의 문자가 포함되어 있는지 계산하고이를 기반으로 글꼴 크기를 계산할 수 있습니다. 더 많은 문자 = 작은 글꼴 크기.

어리석은 결과를 방지하기 위해 글꼴 크기를 얼마나 크게하고 얼마나 작게 만들지에 대한 대문자를 사용합니다.

Answer 4

단순히 해결책은 줄 끝 부분에 요소를 놓고 offsetHeight가 올 때까지 텍스트 크기를 줄이는 것입니다. 예를 들어,에 마침표 포장 : 전체 정류장이 어디 이제 확인할 수 있습니다

<span id="check">.</span> 

을, 그리고 그것을 가까이 당신이 희망 어디 때까지 텍스트 크기를 줄일 수 있습니다. 이 특정 구문의 선 높이를 매우 크게 설정하면 더 쉽게 결정할 수 있습니다.

Answer 5

카운팅 문자는 해결책이지만 문자의 너비를 고려해야합니다. 고정 너비 글꼴을 사용하지 않는 한 'W'는 'i'보다 넓습니다.

또한, 당신은 등, 자신의 폰트 크기 설정이 같은 AR 당신이 될 것입니다, 당신의 선택의 글꼴이 클라이언트의 브라우저에서 사용할 수 있습니다 보장 할 수 없습니다

당신은, 그러나,이 개 솔루션을 결합 할 수 있습니다 - 첫째, 어떤 문자 계산 알고리즘을 사용하여 대략적인 글꼴 크기를 계산합니다. 예를 들어, 문자의 너비가 고정되어 있다고 가정하고 js가 줄이 어쨌든 분할되었다고 판단하면 클라이언트 측 js로 계산을 수정하십시오.

약간의 조정이 필요하지만 만족스러운 결과를 얻을 수 있다고 생각합니다.

Answer 6

기본 텍스트 크기가 있다고 가정하고이를 설정하고 요소의 offsetHeight를 확인하십시오. 그것은 분명 두 라인 인 경우는 offsetHeight 극적으로 약 50 % jQuery를 사용하여

예에 의해 감소 ​​될 때까지 ...

var defaultSize = 36; // if title is taller than this, it will be shrinked 

$(".articleTitle").each(function() { 
    var h = $(this).height(); 
    var i = defaultSize; 
    while(h > defaultSize) { 
    i--; 
    this.style.fontSize = i + 'px'; 
    h = $(this).height(); 
    } 
});