調用（觸發）的div元素Y的溢出JS功能

所以，我有一個<div>元素，它具有自動換行，但overflow-y已被設置爲hidden（這正是我需要的）。調用（觸發）的div元素Y的溢出JS功能

但讓我們假設<div>是充滿文字，它溢出，結果 - 其餘的文本被隱藏（這是很好的）。

但我想達到以下效果：當且僅當盒子在Ÿ方向四溢，我希望它顯示一些文字，他說：「點擊顯示其餘」。我知道如何使「點擊顯示其餘」部分，但我不知道的是如何顯示文本只有時，方塊溢出和方向。

快速旁註：我讀Calling JavaScript from function from CSS。我有想法，在溢出 - y它會調用一個函數，但這被證明是不可能的。所以我正在尋找另一種解決方案。

我<div>元素：

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

所以，問題的概述：我需要顯示「點擊這裏確實看到休息」的時候，DIV是y中溢出方向。

謝謝你在前進

來源

2016-08-30 Tee-Tree

你的基本想法可能是檢查的div溢出來，並相應地顯示按鈕。請注意，這是真正的基本演示。你會過得更好取決於切換按鈕一類，如果它四溢與否等

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'; 
 
}

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; 
 
}

<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>

來源

2016-08-30 10:45:28 thepio

您可以使用下面的函數來計算你的行數：

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(); 
}

來源

2016-08-30 10:45:38

不錯的想法，使用行數，一個字數會更好壽' –

您的div（添加ID）：

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

有這樣的沒有事件處理程序;這是知道的，但有一招，你可以做一個字數，然後發射事件e。g

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

來源

2016-08-30 10:59:53

調用（觸發）的div元素Y的溢出JS功能

回答

相關問題