Preface
This situation will be encountered during development. Only two lines are displayed. If more than two lines are exceeded, a "Show more" button will be displayed. Click the button to display the content of the remaining lines. There is a jQuery plugin loadingDots that specifically implements this function. However, today we are going to use native Javascript to implement this requirement. To achieve this requirement, the most important thing is to determine the number of lines of the text in this container. After obtaining the number of lines, modify the element height and determine whether the load button is displayed.
window.getComputedStyle()
To use native JavaScript code to get the individual style properties of an element, it is inevitable to use window.getComputedStyle() . It can return the styles of an HTML element when it is actually displayed in the browser - of course, some styles will be blocked by the browser. For example, if you want to get the color of a link and be prepared to judge whether the user has visited a certain address by color, that is definitely not possible.
The method returns a style key-value pair, which is an instance of CSSStyleDeclaration . The index names of each attribute do not have - and the camel nomenclature is adopted. For example, lineHeight .
Number of rows = overall height/line height
The overall height can be obtained through height. The row height can be obtained through lineHeight , and the result is rounded to get the number of rows.
But there is a problem, if line-height value is not set for an element, its default value is normal , which is usually 1.2 in desktop browsers, but it is also related to fonts. Therefore, it is best to set line-height value for elements that need to calculate the number of rows.
A simple implementation is as follows:
function countLines(ele) { var styles = window.getComputedStyle(ele, null); var lh = parseInt(styles.lineHeight, 10); var h = parseInt(styles.height, 10); var lc = Math.round(h / lh); console.log('line count:', lc, 'line-height:', lh, 'height:', h); return lc;}Complete code example
<!DOCTYPE html><html><head> <title>Line Count</title> <style type="text/css"> p { line-height: 1.3em; } </style><meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head><body><p id="target">She just made having a baby look lovely. Everything is white and she always has a fresh blueberry pie that's steaming and scones and closed cream and she's reading The Old Man and the Sea and her little boy is rolly with bonnets. It's amazing, and I thought this is lovely. My kid is like playing with like explosive devices. I don't know where she's found them, like sticking them in our dog's ear. She already knows how to dry wall cause she puts holes in the wall.<br />"Today's Chinese are just like the Germans back then, indulging in the illusion of "rise", accustomed to believing in others' flattery, and taking it for granted that as long as China continues to maintain economic growth, not only will the future economic aggregate surpass the 'world leader' of the United States, the United States can expect, but China's comprehensive revival will also be in the pocket." Cheng Yawen, professor at the School of International Relations and Public Affairs of Shanghai Foreign Studies University, pointed out in his new book "Strategic Powers of Great Powers", that many people in China are now trapped in the illusion of "prosperity" and do not realize that behind the total economic aggregate, China is actually an extremely backward country. There is no big country in the world that has emerged in a calm and peaceful situation, and China's new round of civilization rejuvenation will also be full of risks and twists and turns. Preventing a country from collapse, disintegration or decline should become the top priority of China's national strategy. Deepening "soft happiness" will only make a country vulnerable. </p><p>Number of rows: <span id="shower"></span></p>Change the window size and automatically calculate <button onclick="countLines()">calculate immediately</button><script type="text/javascript">var target = document.getElementById('target');var shower = document.getElementById('shower');function countLines(ele) { var styles = window.getComputedStyle(ele, null); var lh = parseInt(styles.lineHeight, 10); var h = parseInt(styles.height, 10); var lc = Math.round(h / lh); console.log('line count:', lc, 'line-height:', lh, 'height:', h); return lc;}function change() { shower.innerHTML = countLines(target);}window.onresize = change;change();</script></body></html>[/html]Summarize
The above is all about this article. I hope the content of this article will be helpful to everyone using Javascript. If you have any questions, please leave a message to discuss.