CSS Prevent Safari from Showing Tooltips When Text Overflow Hides

In this article, we’ll explain how to use CSS to prevent Safari from showing tooltips when text overflows.

Read more: CSS Tutorial

Problem Description

In web development, you often encounter situations where you need to truncate text and hide overflow using ellipsis. A common approach is to use the text-overflow: ellipsis style. However, in some cases, in Safari, when text is truncated and hidden, a tooltip containing the hidden text is displayed.

This behavior may disrupt the page layout and cause unnecessary interference. Therefore, we need to find a solution to prevent Safari from displaying this tooltip.

Solution

Method 1: Use overflow: hidden

A simple solution is to use the overflow: hidden style. This style clips the overflow of the element, preventing the tooltip from displaying. Here’s an example:

<style> 
.text-container { 
width: 200px; 
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
} 
</style> 

<div class="text-container"> 
Long long long long text 
</div> 

In the example above, we create a container with a width of 200px and hide the overflow of the text. We also use the text-overflow: ellipsis style to display ellipsis.

Method 2: Using -webkit-line-clamp

Another solution is to use the -webkit-line-clamp property. This property, a Safari-specific property, sets the maximum number of lines in an element and hides excess text with ellipsis.

Here’s an example using the -webkit-line-clamp property:

<style> 
.text-container { 
display: -webkit-box; 
-webkit-line-clamp: 2; 
-webkit-box-orient: vertical; 
overflow: hidden; 
text-overflow: ellipsis; 
} 
</style> 

<div class="text-container"> 
Long long long long text 
</div> 

In the example above, we set the container’s display mode to -webkit-box and the -webkit-line-clamp property to 2, indicating that only two lines of text are displayed. Any text beyond two lines will be hidden and an ellipsis will be displayed.

Method 3: Using Pseudo-Elements to Mask Text

Another method is to use pseudo-elements to mask text to prevent Safari from displaying tooltips. Here’s an example:

<style> 
.text-container { 
position: relative; 
width: 200px; 
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
} 

.text-container::after { 
content: ''; 
position: absolute; 
bottom: 0; 
right: 0; 
width: 1em; 
height: 1em; 
background-color: white; 
} 
</style> 

<div class="text-container"> 
Long long long long text 
</div> 

In the example above, we create a container with a width of 200px, hide the overflowing text, and display an ellipsis. We also use the pseudo-element ::after to cover the bottom right portion of the text to prevent Safari from displaying a tooltip.

Summary

In this article, we introduced three methods for preventing Safari from displaying tooltips when text overflows and is hidden: using the overflow: hidden style, using the -webkit-line-clamp property, and using a pseudo-element to cover it. Choose the appropriate method based on your needs to improve the user experience and accessibility of your page.