I had an idea tonight about being able to truncate text in the middle with CSS and a little bit of "extra" markup. This is what I came up with.
Wanna see a demo? Copy this code into HTML file, crack it open in a browser, and you'll see something like "Lorem ipsum dolor sit ...neque vitae turpis" and resize the browser to see it change :-)
Obviously the extra content isn't ideal, and there's probably a better/more efficient way to do this, but the idea struck me, so this happened.
<style type="text/css">
.top {
display: flex;
flex-direction: row;
max-width: 80%;
margin: 30px auto;
}
.trunc {
white-space: nowrap;
overflow: hidden;
text-overflow: '';
}
.trunc:first-child {
width: 70%;
}
.trunc:last-child {
text-overflow: ellipsis;
direction: rtl;
width: 30%;
}
</style>
<div class="top">
<div class="trunc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut vehicula lobortis euismod. Maecenas condimentum,
sem sit amet consectetur convallis, quam tellus
tincidunt nisl, ut posuere lectus neque vitae turpis.
</div>
<div class="trunc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut vehicula lobortis euismod. Maecenas condimentum,
sem sit amet consectetur convallis, quam tellus
tincidunt nisl, ut posuere lectus neque vitae turpis.
</div>
</div>
Comments (0)
Leave A Comment