html - 使用 css 设置文本溢出可见的背景颜色

Question

我设置了我的 <P>带有固定高度和 overflow:hidden 的标签.在它的悬停效果上，我设置了 overflow:visible;

我的问题是文本显示但我想设置 z-index和 <p> 的背景颜色, 背景显示仅适用于 max-width的 <P> .我想在它覆盖的文本高度处更改背景颜色。

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;
}

参见:FIDDLE

Answer 1

JSFiddle - DEMO

您可以使用 max-height: none; 到 .oe_description:hover

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>