当文本被overflow: hidden
属性剪切时,我正在寻找一种向用户提供反馈的方法(例如,文本末尾的显示省略号或箭头,或者使用不同的颜色),因此用户知道何时可以将鼠标悬停在元素上以显示更多内容。
这是我现在提出的问题:
https://jsfiddle.net/5u259u9r/6/
请注意第二张图片的行为。
我希望文本的样式不同,只要它适合max-height
限制的框。
纯css甚至可以实现这一点吗?
我一直在玩text-overflow
,但没有运气。
答案 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/