Проверьте, имеются ли полосы прокрутки с помощью Javascript?

Question

Я строй немного липкие заметки приложения для удовольствия, а иногда это происходит:

(. Это потому, что первое слово шире, чем ширина банкноты)

Есть способ проверки наличия полосы прокрутки в Javascript? Если я могу это сделать, я могу изменить размер заметки до тех пор, пока она не будет содержать текст без полосы прокрутки.

Answer 1

Это свойство CSS3 нарушит слово в, если он слишком велик для контейнера:

#selector { 
    word-wrap: break-word; 
} 

word-wrap: normal; для переключения типа

Это работает в основном каждый браузер и верить этому или нет, поддержка свойство идет еще в IE5. Кредит за это принадлежит Луи Лазарису за его пост, Word-Wrap: A CSS3 Property That Works in Every Browser.

Answer 2

Вот способ сделать то, что ОП просили, чтобы расширить в DIV, если он имеет полосу прокрутки, пока не больше не один:

var autoWiden = function (elem) { 
    var checkForScroll = function() { 
      var tsl; 

      elem.scrollLeft += 10; // try to scroll 
      tsl = elem.scrollLeft; // will be 0 if no scroll bar 
      elem.scrollLeft = 0; // reset scroll 

      return tsl; 
     }; 

    while (checkForScroll() > 0) { 
     elem.style.width = (elem.offsetWidth + 10) + 'px'; 
    } 
}; 

See example →

Answer 3

Что я сделал в подобном обстоятельства добавляют текст к временному элементу с скрытой видимостью, измеряют его и, если он слишком велик, делают что-то для его решения (что может включать в себя ручную упаковку текста, вставляющего БР, или просто расширение конечного элемента, который вы в конечном итоге помещаете в текст). Это дает гораздо больший контроль, чем использование word-wrap: break-word;

Answer 4

Для лучшей кросс-браузерной поддержки я бы рекомендовал подход с переносом слов, добавив элемент в заданную ширину (100% или некоторую ширину пикселя), чтобы он не расширялся. Это должно обеспечить наилучшее решение.

Вы также можете установить overflow-x: hidden; просто скрыть полосу прокрутки, но она не работает в IE7/8, а также приведет к тому, что переполненный текст не будет отображаться вместо обернутого, что, вероятно, не является тем, что вы хотите.