样式元素仅在包含剪切文本时

时间:2016-02-25 13:23:01

标签: html css css3 cross-browser

当文本被overflow: hidden属性剪切时,我正在寻找一种向用户提供反馈的方法(例如,文本末尾的显示省略号或箭头,或者使用不同的颜色),因此用户知道何时可以将鼠标悬停在元素上以显示更多内容。

这是我现在提出的问题:
https://jsfiddle.net/5u259u9r/6/

请注意第二张图片的行为。

我希望文本的样式不同,只要它适合max-height限制的框。

纯css甚至可以实现这一点吗? 我一直在玩text-overflow,但没有运气。

1 个答案:

答案 0 :(得分:1)

只需将其添加到您的CSS

即可
.gallery li .desc > div {
  overflow: hidden;
  text-overflow:ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}

.gallery li:hover .desc > div {
  overflow: visible;
  white-space: normal;
  display: block;
}

在添加省略号之前,您需要根据要显示的行数更改此-webkit-line-clamp: 2;的值。

在这里工作JSFiddle https://jsfiddle.net/5u259u9r/7/

在此更新了JSFiddle https://jsfiddle.net/5u259u9r/8/