자바 스크립트 : 텍스트가 줄 바꿈되는지 감지

텍스트가 줄 바꿈 될 경우 어떻게 감지 할 수 있습니까?자바 스크립트 : 텍스트가 줄 바꿈되는지 감지

큰 텍스트가있는 헤더가있는 UI가 있다고 가정 해 보겠습니다. 여기서 가장 큰 텍스트가 메뉴 막대에 세로로 맞춰 지길 원합니다. 다음과 같은 숫자 데이터를 표시합니다.

LABEL: 9999 LABEL2: 99999

숫자가 커질 수 있습니다. 일부 화면 (예 : phones - 요소가 넘치고 머물러 있어야하는 바 아래를 감싸줍니다. 오버 플로우를 원하지 않습니다. 숨김. 나는 사용자가 모든 것을 보길 원한다.

필자는 엘리먼트의 크기를 계산할 수 있기를 원합니다. 선결 적으로 글꼴을 줄이면 요소를 왼쪽으로 이동하여 공간을 확보 할 수 있습니다.

출처

2013-05-24 Rafael Baptista

어떤 부분에 도움이 필요합니까? 랩핑 여부를 감지합니까? 글꼴 크기 줄이기? 요소를 왼쪽으로 이동 하시겠습니까? – gilly3

html과 css 구조의 많은 것들은 많은 adjectional 소스를 제공하지 않고 묻는 것만 큼 "이 차를 만드는 방법"을 묻는 것입니다. – WooCaSh

white-space CSS 처리를 nowrap으로 설정하면 포함 요소의 너비와 스크롤 너비가 다른 너비 속성 간의 차이를 감지 할 수 있습니다.

여기에 설명 할 내용은 jsFiddle입니다.

너비가 너비보다 넓다는 것을 알게되면 텍스트의 크기를 조정하거나 그렇지 않을 때까지해야 할 일을 할 수 있습니다.

출처

2013-05-24 22:43:36 Klors

멋진 @WooCaSh. 다음은 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

출처

2015-01-16 19:08:22

자바 스크립트 : 텍스트가 줄 바꿈되는지 감지

답변

관련 문제