0

As we know we could truncate text with CSS and "untruncate it this way:

<style type="text/css">
.one-long-line {
max-width:400px;
white-space:nowrap; 
overflow:hidden;
text-overflow:ellipsis;
}

.one-long-line:hover {
overflow:visible;
}
</style>

I used this to cut a long H1 in mobile view, but I want the user to be able to see the full header. Because hover doesn't work on mobile I wonder if something similar could be coded where the user touches the header and of course what this code should be. Thanks

Hans van Meteren
  • 1
  • 1

1 Answers1

0

Works with :active

.overflow-tip {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

.overflow-tip:active, .overflow-tip:hover {
  overflow-x: visible;
}

See demo here

Yuri Gor
  • 1,353
  • 12
  • 26