Text Overflow Practice
I made some tweaks to this website today and one of those tweaks involved the use of the text-overflow CSS property. I worked with a bit in the past, but was surprised when I didn't find it in Eric Meyer's most recent CSS Pocket Reference. It looks like it is a fairly new property, but it has some interesting uses.
Lorem test dolor sit amet, consectetur adipiscing elit. Suspendisse nec ligula mattis, imperdiet velit eget, egestas felis. Sed sollicitudin ac leo at fermentum. Phasellus eu justo quis diam efficitur aliquet. Mauris a felis varius purus blandit convallis. Nam placerat purus enim, et pretium arcu porttitor a. Vivamus quis sem gravida, mattis diam eu, rutrum sapien. Nam sit amet dictum ligula.
Vivamus ut mattis tortor. Maecenas id augue nec purus efficitur consectetur. Nam placerat rhoncus elit, id porta quam interdum id. Nulla condimentum, metus nec interdum eleifend, nibh leo pretium nisi, vel tempus metus tellus tempus arcu. Nulla vel tortor consectetur, vestibulum massa et, gravida ipsum. Aliquam erat volutpat. Morbi molestie egestas lectus, at vulputate ipsum molestie sed. Integer posuere, purus vel semper efficitur, diam mi ultrices tellus, et semper lectus nisi a nunc. Aenean risus dui, feugiat posuere sapien sit amet, bibendum suscipit libero. Integer commodo tempor ipsum a varius. Etiam nulla metus, mattis eget lorem in, pretium pulvinar nunc.
Quisque sagittis commodo urna in euismod. Nunc urna ligula, aliquet eget luctus eget, vehicula in ante. In faucibus consectetur aliquet. Nullam dui elit, suscipit non arcu a, bibendum porta metus. Integer ac vehicula augue. Maecenas porta ante augue, et maximus magna lobortis ac. Morbi eu libero congue, pharetra metus eu, gravida tellus. Proin facilisis, diam suscipit laoreet congue, enim urna tincidunt sem, in finibus odio lorem vel neque. Pellentesque tempus magna erat, nec egestas metus mattis vel. Nunc sagittis neque et magna pharetra maximus. In et congue turpis. Ut et mollis velit. Sed in ipsum tristique enim ornare bibendum in eu eros. Nam ut euismod sapien. Aenean tristique eu ex et auctor. Sed lobortis feugiat molestie.
View the code:
HTML and JS
<p class="one">Lorem test dolor sit amet, consectetur adipiscing elit. Suspendisse nec ligula mattis, imperdiet velit eget, egestas felis. Sed sollicitudin ac leo at fermentum. Phasellus eu justo quis diam efficitur aliquet. Mauris a felis varius purus blandit convallis. Nam placerat purus enim, et pretium arcu porttitor a. Vivamus quis sem gravida, mattis diam eu, rutrum sapien. Nam sit amet dictum ligula. </p>
<p class="two">Vivamus ut mattis tortor. Maecenas id augue nec purus efficitur consectetur. Nam placerat rhoncus elit, id porta quam interdum id. Nulla condimentum, metus nec interdum eleifend, nibh leo pretium nisi, vel tempus metus tellus tempus arcu. Nulla vel tortor consectetur, vestibulum massa et, gravida ipsum. Aliquam erat volutpat. Morbi molestie egestas lectus, at vulputate ipsum molestie sed. Integer posuere, purus vel semper efficitur, diam mi ultrices tellus, et semper lectus nisi a nunc. Aenean risus dui, feugiat posuere sapien sit amet, bibendum suscipit libero. Integer commodo tempor ipsum a varius. Etiam nulla metus, mattis eget lorem in, pretium pulvinar nunc.</p>
<p class="three">Quisque sagittis commodo urna in euismod. Nunc urna ligula, aliquet eget luctus eget, vehicula in ante. In faucibus consectetur aliquet. Nullam dui elit, suscipit non arcu a, bibendum porta metus. Integer ac vehicula augue. Maecenas porta ante augue, et maximus magna lobortis ac. Morbi eu libero congue, pharetra metus eu, gravida tellus. Proin facilisis, diam suscipit laoreet congue, enim urna tincidunt sem, in finibus odio lorem vel neque. Pellentesque tempus magna erat, nec egestas metus mattis vel. Nunc sagittis neque et magna pharetra maximus. In et congue turpis. Ut et mollis velit. Sed in ipsum tristique enim ornare bibendum in eu eros. Nam ut euismod sapien. Aenean tristique eu ex et auctor. Sed lobortis feugiat molestie.</p>CSS
.one {
overflow: hidden;
white-space: normal;
}
.two {
max-width: 50%;
max-height: 2rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.three {
overflow: hidden;
white-space: nowrap;
max-width: 100%;
max-height: 2rem;
text-overflow: ellipsis;
}