处理溢出Reveal JS幻灯片的最佳方法 [英] Best way to handle overflowing Reveal JS slide

问题描述

我正在研究一个项目，我正在使用Reveal JS以幻灯片的形式向用户提供数据。


有时我发现文本溢出


由于该图像不可见，如图所示 http://i.stack.imgur.com/TWOaO.png
$ b

我试过减少文本 - 大小根据屏幕高度动态调整，如下所示：

$ b

  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）; 
} 
  

在递归循环中运行此代码将调整 < section> 的字体大小来调整文档高度。

有没有更好的方法或插件在不减少幻灯片中字符数的情况下处理这个问题？解析方案

定义CSS类 scrollable-slide ：

  .scrollable-slide {
 height：800px; 
 overflow-y：auto！important; 
 
 
 
 
 
 $ b 
定义将上述CSS类添加到幻灯片的侦听器，如果它太大。为此，您将需要jQuery。
 
 
 pre $  function resetSlideScrolling（slide）{
 $（slide）.removeClass（'滚动 - 滑动'）; 
 
 
函数handleSlideScrolling（幻灯片）{
 if（$（slide）.height（）> = 800）{
 $（slide）.addClass（ 滚动 - 滑动）; 
 
 
 
 Reveal.addEventListener（'ready'，function（event）{
 handleSlideScrolling（event.currentSlide）; 
}）; 
 
 Reveal.addEventListener（'slidechanged'，function（event）{
 resetSlideScrolling（event.previousSlide）
 handleSlideScrolling（event.currentSlide）; 
}）; 
  

如果您想摆脱 box-shadow 和 background ，当它滚动时，然后添加这些CSS样式：



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

参考文献： b


• Reveal JS网站 - 包含API信息


• SO - Reveal JS无法滚动幻灯片 - 我得到了CSS

I'm working on a project for which I'm using Reveal JS to present data to the users in the form of slides.

Sometimes I find the text overflowing beyond the viewport.

Due to which the text is not visible as shown in this image http://i.stack.imgur.com/TWOaO.png

I've tried reducing the text-size dynamically based on the screen height, like 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 this code in a recursive loop would adjust the <section>'s font-size to adjust to the document height.

Is there a better way or a plugin to handle this problem without reducing the number of characters in the slide?

解决方案

Define the CSS class scrollable-slide:

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

Define listeners which add the above CSS class to the slide if it is too large. For this, you will 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 you want to get rid of the box-shadow and background when it is scrollable, then 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 to scroll in the slides - where I got the CSS

这篇关于处理溢出Reveal JS幻灯片的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！