Lập trình xác định Kích thước phông chữ cho hiển thị một dòng

Question

Tôi đang hiển thị các bài viết trên một trang. Tiêu đề bài viết đôi khi tràn qua hai dòng, và thậm chí có thể chỉ có một từ duy nhất trên dòng thứ hai. Điều này là rất không mong muốn. Sử dụng jQuery/CSS, phương pháp nào tốt nhất để lập trình xác định kích thước phông chữ mới cho các tiêu đề để giữ chúng trên một dòng?

Answer 1

Kind của một hack nhưng: Một cái gì đó như thế này sẽ giúp bạn có gần. Nó có thể cần một chút tweeking. Về cơ bản, nó nhân bản thành phần và đặt văn bản của bản sao thành & nbsp, do đó, nó sẽ có ý tưởng về chiều cao của một dòng. Sau đó, nó giảm kích thước phông chữ của phần tử cho đến khi nó nhỏ hơn chiều cao mục tiêu.

Hãy nhớ rằng bạn cũng cần phải đính kèm chức năng này vào kích thước thay đổi của cha mẹ().

$(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

Tôi chỉ đoán ở đây - Chúng ta có thể làm điều đó bằng cách sử dụng JS để biết chiều cao của vùng chứa của văn bản và sau đó giảm kích thước phông chữ nếu cần thiết? Tôi đoán điều này sẽ giới thiệu nội dung trang thay đổi kích thước vì sự thay đổi.

Answer 3

Bạn chỉ có thể đếm số ký tự nằm trong tiêu đề và tính kích thước phông chữ dựa trên đó. Nhiều ký tự hơn = kích thước phông chữ nhỏ hơn.

Tôi sẽ đặt mũ trên kích thước phông chữ lớn và nhỏ như thế nào sẽ được phép đi, để ngăn chặn kết quả ngớ ngẩn.

Answer 4

Một giải pháp đơn giản là đặt phần tử ngay tại cuối dòng và giảm kích thước văn bản cho đến khi offsetHeight chính xác. Ví dụ: bọc toàn bộ điểm dừng tại:

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

Bây giờ bạn có thể kiểm tra vị trí dừng đầy đủ và giảm kích thước văn bản cho đến khi gần đúng hơn nơi bạn mong muốn. Nếu bạn đặt chiều cao dòng trên cụm từ cụ thể này là rất lớn, nó sẽ giúp dễ xác định hơn.

Answer 5

Đếm ký tự là giải pháp, nhưng bạn phải tính đến chiều rộng của ký tự. 'W' rộng hơn 'i', trừ khi bạn đang sử dụng phông chữ có chiều rộng cố định.

Hơn nữa, bạn không thể đảm bảo rằng phông chữ bạn đã chọn sẽ có sẵn trong trình duyệt của khách hàng, đó là thiết lập font-size mình sẽ cùng bạn ar vv

Bạn có thể, tuy nhiên, kết hợp hai giải pháp - đầu tiên, kích thước phông chữ xấp xỉ bằng cách sử dụng một số ký tự đếm ký tự, ví dụ - giả sử rằng các ký tự có độ rộng cố định, và sau đó sửa các phép tính của bạn với js phía máy khách, nếu js xác định rằng dòng đó đã được chia nhỏ.

Nó sẽ yêu cầu một số điều chỉnh, nhưng tôi tin rằng kết quả chấp nhận được có thể đạt được.

Answer 6

Tôi giả sử bạn có kích thước văn bản mặc định, do đó hãy đặt kích thước văn bản đó và kiểm tra offsetHeight của phần tử. Nếu nó rõ ràng là hai dòng, thu nhỏ kích thước phông chữ cho đến khi offsetHeight giảm đáng kể bởi khoảng 50%

Một ví dụ sử dụng 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(); 
    } 
});