TIL – How to truncate a string and make it appear on hover in React/HTML/CSS

There are a few ways to truncate text and make it appear on hover in React. “Truncate” means shortening the text and following it with an ellipsis, like so: “really long text” becomes “really lon…”

React

We can use a little trick. Instead of using the hover psuedo-class of the paragraph element, we can use the title attribute which displays its content in a tooltip.

Note, I’m using the React Styled Components library which allows me to use CSS in React

Here is the styles file

export const Text = styled.p`
  color: #a5a9b5;
  font-family: Inter;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0em;
  line-height: 12px;
  text-align: right;
  cursor: default;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
`;

Here is the React code:

<Text >really really long text</Text>

HTML and CSS

To do this using HTML and CSS, we can add the following styles to our HTML:

<p class="text">
Lorem ipsum lorem ipsum lorem ipsum ipsum lorem ipsum
</p>

.text{
    text-overflow: ellipsis;  // this line adds the ellipsis
    margin-bottom: 12px;
    cursor: pointer;          // this changes the cursor 
    word-break: break-all;
    overflow:hidden;         // this hides the overflowing text
    white-space: nowrap;
}
.text:hover{
    overflow: visible;        // this makes the overflowing text visible on hover
    white-space: normal;
    height:auto;
}