Show hidden part of truncated text on hover/touch

Here are three ways to show hidden part of truncated text on touch/hover without Javascript

1) overflow:visible

Hover over or touch me to see the full version of this string. It looks like replaced by tooltip
some other stuff

Pros:

  • No Javascript
  • Good readability
  • Small and simple cross-browser CSS code
  • Easy to render.

Contras:

  • Need extra markup (inner span wrapper)
  • Requires all the parents of the text container to be wide enough or have ‘overflow’ porperty to be ‘visible’.

Here is SCSS with comments:

.overflow-tip {
  /* make it single-line */
  white-space:nowrap;
  /* truncate by container's size */
  overflow-x: hidden;
  /* add three dots */
  text-overflow: ellipsis;
  /* on touch or hover */
  &:active, &:hover {
    /* show hidden part outside of parent */
    overflow-x: visible;
    /* and with inner span */
    span {
      /* allow to overlap siblings */
      position: relative;
      /* make readable design */
      background-color: PaleGoldenRod;
      border: 1px solid gray;
      padding: 3px;
      /* compensate padding and border size to avoid jerking */
      margin-left: -4px;
    }    
  }
}

2) direction:rtl

Hover over or touch me to see the end of this long string.
some other stuff

Pros:

  • No Javascript
  • No extra HTML
  • Super simple CSS

Contras:

  • Not so readable for very long string or very short container
    Commented scss:
.rtl-switch {
  /* make it single-line */
  white-space:nowrap;
  /* truncate by container's size */
  overflow-x: hidden;
  /* add three dots */
  text-overflow: ellipsis;
  /* on touch or hover */
  &:active, &:hover {
    /* make text have right to left direction */
    direction: rtl;
    /* fix three dots overlapping issue*/
    padding-left:10px;
    &:after {
      /* fix brackets in rtl mode */
      content: "\200E‎";
    }
  }
}

3) marquee (transition left)

Hover over or touch me to see animated scrolling of this string. Fancy but buggy. May be still can be improved.
some other stuff

Pros:

1) Fancy
2) Displays whole string in a limited space

Contras:

1) Bloated HTML (needs two extra spans)
2) Bad readability for long strings
3) Animation bug on mouse out or not truncated string(may be still can be fixed, I’ll see later)
4) Animation can load CPU on heavy page
5) Needs hardcoded offset, or will be scrolled until container is not empty
Let’s see some code:

.marquee {
  /* Single line */
  white-space:nowrap;
  /* Truncate by container size */
  overflow: hidden;
  /* Both spans */
  span {
    /* Allow to set size */
    display: inline-block;
    /* Size same as container when not hovered to allow ellipsis */
    width: 100%;
    /* Second span */
    span {
      /* Turn animation on */
      @include transition(left 4s linear);
      /* Allow position manipulation */
      position: relative;
      /* truncate by container's size */
      overflow-x: hidden;
      /* add three dots */
      text-overflow: ellipsis;
      /* Explicitly declare initial position to animate well */
      left: 0px;
    }   
  }
  /* on touch or hover */
  &:active, &:hover {
    /* Both spans */
    span {
      /* resize to contain whole string without truncation. */
      width: auto;
      /* Second span */
      span {
        /* Animated scroll by length of first span (100% of parent),
  which equals to length of string, not a container.
  Also shift final point back by width of container (500px)
  to not finish with empty box
  and pitch by 15px - I don't know why, may be to compensate paddings */
        left:calc(500px - 15px - 100%);//
      }
    }    
  }

Here is a codepen to play:

See the Pen Expand cropped string on hover/touch, pure CSS by Yuri Gor (@yurigor) on CodePen.0

  1 comment for “Show hidden part of truncated text on hover/touch

  1. November 8, 2018 at 9:58 am

    Thanks, Yuri. Your solutions are plentiful and elegant.

Leave a Reply

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