Javascript: Wykrywanie, czy tekst będzie zawijany

Question

Jak wykryć, czy fragment tekstu będzie zawijany?

Wyobraź sobie, że mam interfejs użytkownika z nagłówkiem, który ma duży tekst. Chcę największy tekst tutaj, który pasuje pionowo na pasku menu. Wyświetla dane numeryczne w następujący sposób:

LABEL: 9999 LABEL2: 99999 

Liczba części może się zwiększyć. Na niektórych ekranach - np. telefony - powoduje to przepełnienie elementu i zawijanie pod paskiem, w którym powinien się znajdować. Nie chcę robić przepełnienia: ukrytego. Chcę, żeby użytkownik zobaczył całą sprawę.

Chciałbym móc w jakiś sposób obliczyć, jak duży byłby element, a gdyby zawinął prewencyjnie zmniejszyć czcionkę, ewentualnie przesunąć element w lewo, aby zrobić miejsce.

Answer 1

Możesz wykryć różnicę między różnymi właściwościami szerokości elementu zawierającego szerokość i szerokość przewijania, jeśli ustawisz obsługę css white-space na nowrap.

Oto jsFiddle do wykazania.

Gdy wiesz, że szerokość przewijania jest szersza niż szerokość, możesz zmienić rozmiar tekstu lub zrobić to, co musisz zrobić, aż nie będzie.

Answer 2

Przyjemny @WooCaSh. Oto aplikacja w 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