Question

所以，我有一个overflow-y元素，它有自动换行，但hidden已设置为<div>（这就是我需要的）。

但是，让我们说<div>是如此充满文本，它溢出并且结果 - 文本的其余部分被隐藏（很好）。

但是我希望达到以下效果：当 y 方向的框溢出时，当时，我希望它显示一些文字，说：＆＃ 34; 点击以显示其余内容＆＃34;。我知道如何制作＆＃34; 点击以显示其余＆＃34;部分，但我不知道当盒子在 y 方向溢出时如何显示仅文本。

快速旁注： 我读了Calling JavaScript from function from CSS。我认为在 overflow-y 它会调用一个函数，但事实证明这是不可能的。所以我正在寻找另一种解决方案。

我的<div style="background-color:rgb(220,220,220);height:30%;width:1024px;overflow-y:hidden;word-wrap:break-word;">元素：

＆＃13;
＆＃13;
https://www.googleapis.com/youtube/v3/playlists?part=snippet&channelId=UCnExqEQyG6WemMK9hpQcoeQ&key=YOUR_API_KEY
＆＃13;
＆＃13;
＆＃13;

所以，问题概述：我需要显示＆＃34;点击这里看看其余的＆＃34;当div在y方向溢出时。

提前谢谢

Answer 1

您的基本想法可能是检查div是否溢出并相应地显示按钮。请注意，这是非常基本的演示。你最好在按钮上切换一个类，具体取决于它是否溢出等。

＆＃13;

var popup = document.getElementById('popup');
var button = document.getElementById('showmore');

var isOverflowing = isOverflowed(popup);

console.log('is the div overflowing? ' + isOverflowing);

if (isOverflowing) {
  button.style.display = 'block';
} else {
  button.style.display = 'none';
}

function isOverflowed(element) {
  return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}

function displayRest() {
  popup.style.height = 'auto';
  button.style.display = 'none';
}

＆＃13;

html, body {
  margin: 10px 0 20px 0;
}

.popup {
  width: 400px;
  height: 270px;
  overflow: hidden;
  border: 1px solid black;
  margin: 0 auto;
  padding: 0;
}
.showmore {
  background-color: red;
  color: white;
  padding: 10px 15px;
  display: none;
  margin: 10px auto 0 auto;
}

＆＃13;

<div id="popup" class="popup">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
  non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<button type="button" id="showmore" class="showmore" onclick="displayRest()">
  Click to display the rest
</button>

＆＃13;

Answer 2

您可以使用以下函数计算您拥有的行数：

var divHeight = $('div.use-overflow').height();
var x = ('div.use-overflow').css('line-height');
lineHeight = parseInt(x); // Returns clean line-height
var lines = divHeight / lineHeight; // Returns number of lines

然后简单地使用if语句来显示或隐藏read more按钮，具体取决于段落的行数。像这样：

if(lines > 4){
  $('.readmore').show();
}else{
  $('.readmore').hide();
}

Answer 3

你的div（添加了id）：

<div id="overflow" style="background-color:rgb(220,220,220);height:30%;width:1024px;overflow-y:hidden;word-wrap:break-word;">

没有事件处理程序;我知道，但有诀窍，你可以做一个字数，然后解雇事件，如

$(document).ready(function() {
    var overflowText = document.getElementById("overflow").innerHTML;
    var TextLength = overflowText.length
    if(TextLength >= 100) {
       // emit event
    }
})

在div元素的Y溢出上调用（触发）JS函数

3 个答案: