我有 8 个属于 bios_ellipsis 类的 div，有 8 个属于 read_more 类的链接。当浏览器变小时，clientWidth 也会变小，我使用以下 css 来截断文本：
.bios_ellipsis {
垂直对齐：中间！重要；
溢出：隐藏！重要；
文本溢出：省略号！重要；
显示：-webkit-box！重要；
-webkit-line-clamp：5！重要；
线夹：5！重要；
-webkit-box-orient：垂直！重要；
显示：-moz-box；
}
我希望每个 bios_ellipsis div 都显示“阅读更多”链接，并且此链接指向 8 个不同的 url。下面代码的问题在于，阅读更多链接最终出现在 div 顶部的不同位置，并且没有以有序的方式显示。
jquery CDN
<script>
$(document).ready(function(){
var getElements = document.querySelectorAll('.bios_ellipsis');
Array.from(getElements).forEach(function(element) {
var pos = $('.bios_ellipsis').offset();
if ( element.clientWidth <= 600 ) {
for(var i = 0; i < getElements.length; i++){
var top = pos.top[i] + '100px';
var left = pos.left[i] + '500px';
$('.read_more').css({
position:'absolute',
top:top[i],
left:left[i]
});
}}
});
});
</script>
您可以使用纯CSS，而无需将head放入Jquery CDN
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.bios_ellipsis {
max-height: calc(1.2em * 1);
/* Set the maximum height for the equivalent of 5 lines */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
cursor: pointer;
/* Add a pointer cursor to indicate interactivity */
}
.bios_ellipsis:hover {
max-height: none;
/* Remove the maximum height on hover */
}
</style>
</head>
<body>
<p class="bios_ellipsis">
Your long text goes here. It will be truncated, and on hover, it will expand to show the full content.Your long text goes here. It will be truncated, and on hover, it will expand to show the full content.Your long text goes here. It will be truncated,
and on hover, it will expand to show the full content.Your long text goes here. It will be truncated, and on hover, it will expand to show the full content.Your long text goes here. It will be truncated, and on hover, it will expand to show the full
content.Your long text goes here. It will be truncated, and on hover, it will expand to show the full content.Your long text goes here. It will be truncated, and on hover, it will expand to show the full content.Your long text goes here. It will be
truncated, and on hover, it will expand to show the full content.Your long text goes here. It will be truncated, and on hover, it will expand to show the full content.Your long text goes here. It will be truncated, and on hover, it will expand to
show the full content.Your long text goes here. It will be truncated, and on hover, it will expand to show the full content.Your long text goes here. It will be truncated, and on hover, it will expand to show the full content.Your long text goes here.
It will be truncated, and on hover, it will expand to show the full content.Your long text goes here. It will be truncated, and on hover, it will expand to show the full content.Your long text goes here. It will be truncated, and on hover, it will
expand to show the full content.Your long text goes here. It will be truncated, and on hover, it will expand to show the full content.Your long text goes here. It will be truncated, and on hover, it will expand to show the full content.Your long text
goes here. It will be truncated, and on hover, it will expand to show the full content.Your long text goes here. It will be truncated, and on hover, it will expand to show the full content.
</p>
</body>
</html>