javascript - Best way to handle overflowing Reveal JS slide -

i'm working on project i'm using reveal js present data users in form of slides.

find text overflowing beyond viewport.

due text not visible shown in image http://i.stack.imgur.com/twoao.png

i've tried reducing text-size dynamically based on screen height, so:

var $present_section = $('section.present'); var section_bottom = $present_section.offset().top + $present_section.height(); var allowed_height = $(document).height() - $present_section.offset().top;  if (section_bottom > allowed_height) {     var cur_font_size = parseint($present_section.css('font-size'));     $present_section.css('font-size', cur_font_size - 1); } 

running code in recursive loop adjust <section>'s font-size adjust document height.

is there better way or plugin handle problem without reducing number of characters in slide?

define css class scrollable-slide:

.scrollable-slide {     height: 800px;     overflow-y: auto !important; } 

define listeners add above css class slide if large. this, need jquery.

function resetslidescrolling(slide) {     $(slide).removeclass('scrollable-slide'); }  function handleslidescrolling(slide) {     if ($(slide).height() >= 800) {         $(slide).addclass('scrollable-slide');     } }  reveal.addeventlistener('ready', function (event) {     handleslidescrolling(event.currentslide); });  reveal.addeventlistener('slidechanged', function (event) {     resetslidescrolling(event.previousslide)     handleslidescrolling(event.currentslide); }); 

if want rid of box-shadow , background when scrollable, add these css styles:

.scrollable-slide::before {     background: none !important; }  .scrollable-slide::after {     box-shadow: none !important; } 

references:

• reveal js website - includes api information
• so - reveal js unable scroll in slides - got css