Question

我将<P>标记设置为修复高度和overflow:hidden。并且在它的悬停效果上，我设置了overflow:visible;

我的问题是文字显示但我想设置z-index和<p>的背景颜色，背景仅显示max-width的{{1}}。我希望在它覆盖的文本高度处更改背景颜色。

CSS：

<P>

请参阅：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>

Answer 2

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

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

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

2 个答案:

JSFiddle - DEMO