Ellipsis

Adding the ellipsis class to paragraphs allows to concatenate text when overflow is not acceptable. For example, in slides if you wish to display a large block of text that just doesn't fit to mobile screens, then the ellipsis can trim it when needed.

Ellipsis
Short text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet suscipit elit, eu ornare lectus. Donec aliquam gravida tortor, et venenatis quam auctor id. Aenean rutrum, felis eget vulputate facilisis, lorem arcu tincidunt ex, vitae eleifend ligula nulla id libero. Quisque vel mi eget urna ultricies cursus finibus in libero. Sed aliquam libero vitae gravida placerat. Mauris ultrices fringilla vehicula. Aenean vel mattis metus, sit amet rhoncus leo. Nam augue sem, ultrices vitae libero ut, posuere luctus lorem. Fusce neque justo, dictum eu mauris et, sodales bibendum nisl. Nulla finibus aliquet enim, vitae tristique neque imperdiet in. Nulla et ultrices lorem. Nulla justo lorem, pulvinar et lobortis eget, vehicula facilisis orci. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet suscipit elit, eu ornare lectus. Donec aliquam gravida tortor, et venenatis quam auctor id. Aenean rutrum, felis eget vulputate facilisis, lorem arcu tincidunt ex, vitae eleifend ligula nulla id libero. Quisque vel mi eget urna ultricies cursus finibus in libero. Sed aliquam libero vitae gravida placerat. Mauris ultrices fringilla vehicula. Aenean vel mattis metus, sit amet rhoncus leo. Nam augue sem, ultrices vitae libero ut, posuere luctus lorem. Fusce neque justo, dictum eu mauris et, sodales bibendum nisl. Nulla finibus aliquet enim, vitae tristique neque imperdiet in. Nulla et ultrices lorem. Nulla justo lorem, pulvinar et lobortis eget, vehicula facilisis orci. Suspendisse potenti.

Medium text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet suscipit elit, eu ornare lectus. Donec aliquam gravida tortor, et venenatis quam auctor id. Aenean rutrum, felis eget vulputate facilisis, lorem arcu tincidunt ex, vitae eleifend ligula nulla id libero. Quisque vel mi eget urna ultricies cursus finibus in libero. Sed aliquam libero vitae gravida placerat. Mauris ultrices fringilla vehicula. Aenean vel mattis metus, sit amet rhoncus leo. Nam augue sem, ultrices vitae libero ut, posuere luctus lorem. Fusce neque justo, dictum eu mauris et, sodales bibendum nisl. Nulla finibus aliquet enim, vitae tristique neque imperdiet in. Nulla et ultrices lorem. Nulla justo lorem, pulvinar et lobortis eget, vehicula facilisis orci. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet suscipit elit, eu ornare lectus. Donec aliquam gravida tortor, et venenatis quam auctor id. Aenean rutrum, felis eget vulputate facilisis, lorem arcu tincidunt ex, vitae eleifend ligula nulla id libero. Quisque vel mi eget urna ultricies cursus finibus in libero. Sed aliquam libero vitae gravida placerat. Mauris ultrices fringilla vehicula. Aenean vel mattis metus, sit amet rhoncus leo. Nam augue sem, ultrices vitae libero ut, posuere luctus lorem. Fusce neque justo, dictum eu mauris et, sodales bibendum nisl. Nulla finibus aliquet enim, vitae tristique neque imperdiet in. Nulla et ultrices lorem. Nulla justo lorem, pulvinar et lobortis eget, vehicula facilisis orci. Suspendisse potenti.

Long text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet suscipit elit, eu ornare lectus. Donec aliquam gravida tortor, et venenatis quam auctor id. Aenean rutrum, felis eget vulputate facilisis, lorem arcu tincidunt ex, vitae eleifend ligula nulla id libero. Quisque vel mi eget urna ultricies cursus finibus in libero. Sed aliquam libero vitae gravida placerat. Mauris ultrices fringilla vehicula. Aenean vel mattis metus, sit amet rhoncus leo. Nam augue sem, ultrices vitae libero ut, posuere luctus lorem. Fusce neque justo, dictum eu mauris et, sodales bibendum nisl. Nulla finibus aliquet enim, vitae tristique neque imperdiet in. Nulla et ultrices lorem. Nulla justo lorem, pulvinar et lobortis eget, vehicula facilisis orci. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet suscipit elit, eu ornare lectus. Donec aliquam gravida tortor, et venenatis quam auctor id. Aenean rutrum, felis eget vulputate facilisis, lorem arcu tincidunt ex, vitae eleifend ligula nulla id libero. Quisque vel mi eget urna ultricies cursus finibus in libero. Sed aliquam libero vitae gravida placerat. Mauris ultrices fringilla vehicula. Aenean vel mattis metus, sit amet rhoncus leo. Nam augue sem, ultrices vitae libero ut, posuere luctus lorem. Fusce neque justo, dictum eu mauris et, sodales bibendum nisl. Nulla finibus aliquet enim, vitae tristique neque imperdiet in. Nulla et ultrices lorem. Nulla justo lorem, pulvinar et lobortis eget, vehicula facilisis orci. Suspendisse potenti.

Full container height text
Slider only

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet suscipit elit, eu ornare lectus. Donec aliquam gravida tortor, et venenatis quam auctor id. Aenean rutrum, felis eget vulputate facilisis, lorem arcu tincidunt ex, vitae eleifend ligula nulla id libero. Quisque vel mi eget urna ultricies cursus finibus in libero. Sed aliquam libero vitae gravida placerat. Mauris ultrices fringilla vehicula. Aenean vel mattis metus, sit amet rhoncus leo. Nam augue sem, ultrices vitae libero ut, posuere luctus lorem. Fusce neque justo, dictum eu mauris et, sodales bibendum nisl. Nulla finibus aliquet enim, vitae tristique neque imperdiet in. Nulla et ultrices lorem. Nulla justo lorem, pulvinar et lobortis eget, vehicula facilisis orci. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet suscipit elit, eu ornare lectus. Donec aliquam gravida tortor, et venenatis quam auctor id. Aenean rutrum, felis eget vulputate facilisis, lorem arcu tincidunt ex, vitae eleifend ligula nulla id libero. Quisque vel mi eget urna ultricies cursus finibus in libero. Sed aliquam libero vitae gravida placerat. Mauris ultrices fringilla vehicula. Aenean vel mattis metus, sit amet rhoncus leo. Nam augue sem, ultrices vitae libero ut, posuere luctus lorem. Fusce neque justo, dictum eu mauris et, sodales bibendum nisl. Nulla finibus aliquet enim, vitae tristique neque imperdiet in. Nulla et ultrices lorem. Nulla justo lorem, pulvinar et lobortis eget, vehicula facilisis orci. Suspendisse potenti.

<header>Short text</header>
<p ellipsis short>Lorem ipsum...</p>

<header>Medium text</header>
<p ellipsis>Lorem ipsum...</p>

<header>Long text</header>
<p ellipsis long>Lorem ipsum...</p>

<header>Full container height text<subheader>Slider only</subheader></header>
<p ellipsis full>Lorem ipsum...</p>
Ellipsis functionality is powered by the jQuery.dotdotdot plugin integrated into this theme.

Leave a comment

Your email address will not be published. Required fields are marked *