Truncate text in the middle with CSS

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)

There are no comments to display.

Leave A Comment