Change the background color to be visible when there is text overflow with CSS

Question

Change the background color to be visible when there is text overflow with CSS

When I set my <P> tag with a fixed height and overflow:hidden, the text is displayed. However, when I apply a hover effect to it, I set overflow:visible;

The issue I am facing is that the text is displayed, but I would like to adjust the z-index and background color of the <p>. The background should only be displayed for the maximum width of <P>, changing the background color at the height where the text ends.

CSS:

.oe_description {   
   overflow:hidden;
   max-height:4.2em;
   text-overflow: ellipsis;
}
.oe_description:hover {
   overflow:visible;
   position:relative;
   z-index:100;
   background: #e5f2f7; 
   font-weight:bold;
}

View example here: FIDDLE

html css

Answer 1

Answer №1

JSFiddle - DEMO

To achieve the desired effect for .oe_description:hover, you can set max-height: none;.

CSS:

.oe_description {   
   overflow:hidden;
   /* 4 times the line-height to show 4 lines */
   /*max-height: 5.6em;*/
   /* 3 times the line-height to show 3 lines */
   max-height:4.2em;
    text-overflow: ellipsis;
}
.oe_description:hover {
   overflow:visible;
   position:relative;
   z-index:100;
   background: #e5f2f7; 
   font-weight:bold;
   max-height: none;
}

HTML:

<div class="col-xs-10 non_padding">
    <p class="oe_description">
       When text must stay on one line, but there is not enough room for it all, this article provides a solution.
       When text must stay on one line, but there is not enough room for it all, this article provides a solution.
       When text must stay on one line, but there is not enough room for it all, this article provides a solution.
       When text must stay on one line, but there is not enough room for it all, this article provides a solution.
       When text must stay on one line, but there is not enough room for it all, this article provides a solution.
       When text must stay on one line, but there is not enough room for it all, this article provides a solution.
       When text must stay on one line, but there is not enough room for it all, this article provides a solution.
    </p>
</div>

Answer 2

JSFiddle - DEMO

To achieve the desired effect for .oe_description:hover, you can set max-height: none;.

CSS:

.oe_description {   
   overflow:hidden;
   /* 4 times the line-height to show 4 lines */
   /*max-height: 5.6em;*/
   /* 3 times the line-height to show 3 lines */
   max-height:4.2em;
    text-overflow: ellipsis;
}
.oe_description:hover {
   overflow:visible;
   position:relative;
   z-index:100;
   background: #e5f2f7; 
   font-weight:bold;
   max-height: none;
}

HTML:

<div class="col-xs-10 non_padding">
    <p class="oe_description">
       When text must stay on one line, but there is not enough room for it all, this article provides a solution.
       When text must stay on one line, but there is not enough room for it all, this article provides a solution.
       When text must stay on one line, but there is not enough room for it all, this article provides a solution.
       When text must stay on one line, but there is not enough room for it all, this article provides a solution.
       When text must stay on one line, but there is not enough room for it all, this article provides a solution.
       When text must stay on one line, but there is not enough room for it all, this article provides a solution.
       When text must stay on one line, but there is not enough room for it all, this article provides a solution.
    </p>
</div>

Answer 3

Answer №2

In order to maintain the div height and resolve the content display problem, you may opt for adding a scroll bar by changing the overflow property to :auto. This approach ensures that the background color adapts accordingly without compromising the overall design.

.oe_description:hover {
   overflow:auto;/*add scroll functionality*/
   position:relative;
   z-index:100;
   background: #e5f2f7; 
   font-weight:bold;     
}

Answer 4

In order to maintain the div height and resolve the content display problem, you may opt for adding a scroll bar by changing the overflow property to :auto. This approach ensures that the background color adapts accordingly without compromising the overall design.

.oe_description:hover {
   overflow:auto;/*add scroll functionality*/
   position:relative;
   z-index:100;
   background: #e5f2f7; 
   font-weight:bold;     
}

Change the background color to be visible when there is text overflow with CSS

Answer №1

JSFiddle - DEMO

Answer №2

Similar questions

If the overflow-x property is set to hidden for the html and body elements, the links in the footer will become unclickable as they will

What is the best way to place a dropdown menu in front of buttons?

Tips for removing Blogger post snippet code from the template below:

How can jQuery be utilized to dynamically update the text in a navbar?

Transform image to text upon hovering

Divide the PHP code into separate files

Organize your HTML & CSS by placing the <link> tag outside of the <head> for better structure

Creating a responsive canvas and image container in fabric.js involves adjusting the layout and size of the

A straightforward jQuery conditional statement for dynamically generated content

The variable $_FILE fails to retrieve the file, resulting in PHP displaying an undefined variable error

Utilizing HTML5 Input Types with Struts2 Tags in JSP: A Step-by-Step Guide

The Element fails to go back to its original position due to CSS Float

Unable to successfully Uploading an Image using PHP

Carousel position images off-center to the right on smaller screens

The text in the Bootstrap 4 card spills over the card-text boundary

Unable to populate HTML dropdown using AJAX

Distance from the border

Building an Image/Grid system using CSS and Javascript

Looking for assistance with CSS to properly align a dozen items

Creating a CSS animation to repeat at regular intervals of time