Javascript: Phát hiện xem văn bản có bị quấn

Question

Làm cách nào tôi có thể phát hiện xem một đoạn văn bản có bị bao bọc không?

Vì vậy, hãy tưởng tượng tôi có giao diện người dùng có tiêu đề có văn bản lớn. Tôi muốn văn bản lớn nhất ở đây phù hợp theo chiều dọc trong thanh trình đơn. Nó hiển thị dữ liệu số như sau:

LABEL: 9999 LABEL2: 99999 

Các bộ phận số có thể lớn hơn. Trên một số màn hình - ví dụ: điện thoại - nó gây ra các yếu tố tràn và bọc bên dưới thanh mà nó được cho là ở lại. Tôi không muốn làm tràn: ẩn. Tôi muốn người dùng nhìn thấy toàn bộ.

Tôi muốn có thể bằng cách nào đó tính toán yếu tố lớn như thế nào, và nếu nó quấn trước khi thu nhỏ phông chữ, có thể di chuyển phần tử còn lại để tạo không gian.

Answer 1

Bạn có thể phát hiện sự khác biệt giữa các thuộc tính chiều rộng khác nhau của chiều rộng và chiều rộng cuộn của phần tử có chứa nếu bạn đặt xử lý css white-space css thành nowrap.

Đây là số jsFiddle để minh họa.

Khi bạn biết rằng chiều rộng cuộn rộng hơn chiều rộng, sau đó bạn có thể thay đổi kích thước văn bản hoặc thực hiện những gì bạn cần làm cho đến khi không.

Answer 2

Nice @WooCaSh. Đây là một ứng dụng trong CoffeeScript:

autoGrow = -> 
    (scope, element, attrs) -> 
    update = -> 
     if element[0].scrollWidth > element.outerWidth isBreaking = true else isBreaking = false 
     element.css 'height', 'auto' if isBreaking 
     height = element[0].scrollHeight 
     element.css 'height', height + 'px' if height > 0 
    scope.$watch attrs.ngModel, update 
    attrs.$set 'ngTrim', 'false' 

# Register 
App.Directives.directive 'autoGrow', autoGrow