在使用 css 可见的文本溢出处设置背景颜色答案

【问题标题】：set background color at text overflow visible using css在使用 css 可见的文本溢出处设置背景颜色
【发布时间】：2014-09-08 15:17:40
【问题描述】：

我将 标签设置为固定高度和overflow:hidden。在它的悬停效果上，我设置了overflow:visible;

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

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

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

+1 回答，谢谢它的工作，但它改变了父 div 的高度，还有其他解决方案吗？
但它与您的 标签的文本高度相同，对吧？你可以使用margin: 0px 到你的 标签...
是的，但  影响我的父 div，它完成了更改位置：相对于绝对位置。
问题是当我将它与我的代码合并时，它会改变外部 div 高度，我想要固定高度，请参阅jsfiddle.net/c7091qus/4
@i'mPosSible 但即使您不使用悬停也是一样的 - jsfiddle.net/c7091qus/6 或 jsfiddle.net/c7091qus/6/show

【解决方案2】：

如果您可以使用滚动条，您可以将溢出选项更改为 :auto。解决内容显示问题，保持相同的 div 高度并相应地转换背景颜色。

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

【讨论】：