以下是一个示例的 HTML 代码,可以在屏幕上以一种动态的方式显示长文本的收藏:
```html
.bookmark-container {
width: 100%;
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #f5f5f5;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.bookmark-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.bookmark-text {
font-size: 16px;
line-height: 1.5;
max-height: 200px;
overflow: hidden;
position: relative;
}
.bookmark-text:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background: linear-gradient(to bottom, rgba(245, 245, 245, 0), #f5f5f5 80%);
}
.show-more {
display: block;
text-align: center;
color: #007bff;
cursor: pointer;
margin-top: 10px;
}
document.addEventListener('DOMContentLoaded', function() {
var bookmarkText = document.querySelector('.bookmark-text');
var showMoreBtn = document.querySelector('.show-more');
showMoreBtn.addEventListener('click', function() {
bookmarkText.style.maxHeight = 'none';
showMoreBtn.style.display = 'none';
});
});
这里是一个非常长的收藏文本,超过了 200 个字符。它会在屏幕上以一种动态的方式显示,并且有一个"显示更多"的按钮,可以让用户展开全部内容。这样可以让收藏的内容在有限的空间内以一种整洁且吸引人的方式呈现。
```
这个代码会在屏幕上显示一个带有收藏标题和文本的容器。文本默认会被截断到 200 个字符,并在底部添加一个渐变遮罩。当用户点击"显示更多"按钮时,文本会展开显示完整内容。
这种方式可以让有限的屏幕空间内更好地展示长文本的收藏内容,同时保持整洁美观的界面效果。可根据具体需求进行调整和优化。