Slider Revolution WP
09.27.2016
Wrap Lines of Text
Wrap long lines of text to make sure they don't bleed off the screen on smaller screen sizes.
- Using WordPress?
Click here to learn how this can be achieved with the WordPress version of the plugin.
Example Caption Layer that will "wrap" into multiple lines of text:
The two key parts are changing the “data-width” value from “auto” to a finite number. And then add “white-space: normal” in the inline style.
When a number is added to the “data-width”, this will serve as a “max-width” for the text. So any text that would normally go beyond this width would just wrap into a new line.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="tp-caption tp-resizeme" id="slide-28-layer-1" data-x="49" data-y="60" data-width="['200']" data-height="['auto']" data-transform_idle="o:1;" data-transform_in="opacity:0;s:300;e:Power2.easeInOut;" data-transform_out="opacity:0;s:300;s:300;" data-start="500" data-splitin="none" data-splitout="none" data-responsive_offset="on" style="z-index: 5; min-width: 200px; max-width: 200px; white-space: normal; font-size: 20px; line-height: 22px; font-weight: 400; color: rgba(255, 255, 255, 1.00);">Text that will wrap. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin nunc sed velit gravida, vitae consectetur massa ornare. Etiam id sem at nulla sollicitudin cursus ut eget tellus. Cras sodales urna et orci iaculis sollicitudin. Vivamus vitae quam dolor. </div> |
