Is there any way to calculate the number of lines a piece of text takes up on different screen sizes?
< /p>
As shown in the figure, if the content exceeds two lines under the width of the user's mobile phone screen, the full text will be displayed, otherwise the full text will not be displayed
我想大声告诉你2017-05-16 13:10:51
Use flex layout in the outer layer, set the number of rows of height, or give the maximum height max-height in the outer layer
Place text in p in the inner layer, and display it normally
.outer {
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
}
.inner {
display: block;
oveflow: auto;
}
html structure:
<p class="outer">
<p class="inner">
文本内容
</p>
</p>
<p id="show-more"></p>
Then judge the height of the two:
if ($('.inner').height() > $('.outer').height()) {
$('#show-more').show();
}
At this time, "See more" will be displayed
给我你的怀抱2017-05-16 13:10:51
The idea is to judge based on the row height. Once the row height is greater than 1 row height, it means that there are two rows of content. Here is the code:
html is as follows:
<p class="content">
文本文本文本文本文本文本文本文本文本文本文本文本文本文本
<a class="more" style="display:none">阅读全文</a>
</p>
js is as follows:
const contentp = document.getElementsByClassName('content')[0];
const style = window.getComputedStyle(contentp, null);
const height = parseInt(style.height, 10);
const lineHeight = parseInt(style.lineHeight, 10);
if (height / lineHeight > 1) { //若行高大于1行,则显示阅读全文
document.getElementsByClassName('more')[0].style.display = 'block';
}
It’s not easy to code, please like it if you like it~
巴扎黑2017-05-16 13:10:51
The current text should have a separate dom, get its height and line height and calculate it dynamically
曾经蜡笔没有小新2017-05-16 13:10:51
To provide an idea, you can set the line-height to 20px, and then after the page is rendered, use the offsetHeight attribute of the node in js, offsetHeight / 20
is the number of lines