How to Avoid CSS text-overflow to Ellipsis ?

Last Updated : 11 Sep, 2023

The CSS text-overflow: ellipsis property is used to truncate text and display an ellipsis at the end of the text when it overflows its container. However, there may be cases where you want to avoid using this property. Fortunately, there are several approaches you can take to achieve this.

Approach 1: Using a Responsive Layout: One approach to avoiding the use of text-overflow: ellipsis is to use a responsive layout for your web page. This can help ensure that your text never overflows its container in the first place. You can achieve this by using CSS media queries to adjust the layout of your web page based on the size of the screen.

Example: In this example, we will make a responsive layout.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <title> 
          Document 
      </title> 
    <style> 
        body { 
            text-align: center; 
        } 
        h1 { 
            color: green; 
        } 
        .container { 
            width: 100%; 
        } 
        .text { 
            font-size: 2em; 
        } 
        @media only screen and (max-width: 768px) { 
            .text { 
                font-size: 1em; 
            } 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <b>How to avoid CSS text-overflow: ellipsis?</b> 
    <div class="container"> 
        <p class="text"> 
              This is a long text that may  
              overflow its container. 
          </p> 
    </div> 
</body> 
  
</html>

Output:

How to avoid CSS text-overflow: ellipsis?

Approach 2: Using Flexbox: Another approach to avoiding the use of text-overflow: ellipsis is to use CSS Flexbox to create a flexible layout. This can help ensure that your text adjusts to fit its container without overflowing. You can achieve this by setting the display property of the container to flex and using the appropriate flexbox properties to position the text within the container.

Example: Using Flexbox:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <title>Document</title> 
    <style> 
        body { 
            text-align: center; 
        } 
        h1 { 
            color: green; 
        } 
        .container { 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            border: 2px solid pink; 
        } 
        .text { 
            flex: 1; 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <b> 
          How to avoid CSS text-overflow: ellipsis? 
      </b> 
    <div class="container"> 
        <p class="text"> 
              This is a long text that may  
              overflow its container. 
          </p> 
    </div> 
</body> 
</html>

Output:

How to avoid CSS text-overflow: ellipsis?

Approach 3: Adjust Font Size: You can also try adjusting the font size of your text to ensure that it fits within its container without overflowing. However, be careful not to make the font size too small, as this can make the text difficult to read.

Example: In this example, we will adjust the font size for avoiding tex-overflow.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <title> 
          Document 
      </title> 
    <style> 
        body { 
            text-align: center; 
        } 
        h1 { 
            color: green; 
        } 
        .container { 
            border: 2px solid red; 
            overflow: hidden; 
            margin-top: 20px; 
        } 
        .text { 
            font-size: 18px; 
            line-height: 1.5; 
        } 
        @media (max-width: 600px) { 
            .text { 
                font-size: 25px; 
            } 
        } 
        @media (max-width: 400px) { 
            .text { 
                font-size: 42px; 
            } 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <b> 
          How to avoid CSS text-overflow: ellipsis? 
      </b> 
    <div class="container"> 
        <p class="text"> 
              This is a long text that may  
              overflow its container. 
          </p> 
    </div> 
</body> 
  
</html>

Output:

How to avoid CSS text-overflow: ellipsis?

Approach 4: Using a Scrollable Container: If you have a large amount of text that needs to be displayed, you can consider using a scrollable container to display it. This can help ensure that all the text is visible without truncating it. You can achieve this by setting the overflow property of the container to scroll or auto.

Example: In this example, we will create a scrollable container

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <style> 
        body { 
            text-align: center; 
        } 
  
        h1 { 
            color: green; 
        } 
  
        .container { 
            margin: 20px; 
            width: 400px; 
            height: 200px; 
            border: 1px solid #ccc; 
            overflow: scroll; 
        } 
  
        .container::-webkit-scrollbar { 
            width: 10px; 
        } 
  
        .container::-webkit-scrollbar-track { 
            background: #f1f1f1; 
        } 
  
        .container::-webkit-scrollbar-thumb { 
            background: #888; 
        } 
  
        .text { 
            font-size: 18px; 
            line-height: 1.5; 
            padding: 10px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <b>How to avoid CSS text-overflow: ellipsis?</b> 
    <center> 
        <div class="container"> 
            <p class="text"> 
                This CSS tutorial, whether you’re a  
                student or a professional, this  
                tutorial is a valuable resource to  
                enhance the visual appeal of your  
                websites or personal blogs. It covers  
                all the basic and advanced concepts  
                of CSS, such as properties, selectors, 
                functions, media queries and more.  
                CSS is used to enhance the visual  
                presentation of web pages. Without  
                the use of CSS, a web page will appear  
                visually unappealing. Styling is 
                an essential property for any website.  
                It increases the standards and overall  
                look of the website that makes it 
                easier for the user to interact with  
                it. A website can be made without CSS,  
                as styling is MUST since no user would  
                want to interact with a dull and shabby  
                website. So for knowing Web Development, 
                learning CSS is mandatory. 
            </p> 
        </div> 
    </center> 
</body> 
  
</html>