Maison > Questions et réponses > le corps du texte
有没有什么办法计算一段文字在不同大小屏幕下占用的行数?
如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文
我想大声告诉你2017-05-16 13:10:51
Utilisez la disposition flexible dans le calque externe, définissez le nombre de lignes de hauteur ou donnez la hauteur maximale max-height dans le calque externe
Placez le texte en p dans le calque interne et affichez-le normalement
.outer {
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
}
.inner {
display: block;
oveflow: auto;
}
Structure HTML :
<p class="outer">
<p class="inner">
文本内容
</p>
</p>
<p id="show-more"></p>
Alors jugez de la hauteur des deux :
if ($('.inner').height() > $('.outer').height()) {
$('#show-more').show();
}
Cette fois, "Afficher plus" s'affiche
给我你的怀抱2017-05-16 13:10:51
L'idée est de juger en fonction de la hauteur de la ligne. Une fois que la hauteur de la ligne est supérieure à 1 hauteur de ligne, cela signifie qu'il y a deux lignes de contenu. Voici le code :
html est le suivant :
<p class="content">
文本文本文本文本文本文本文本文本文本文本文本文本文本文本
<a class="more" style="display:none">阅读全文</a>
</p>
js est le suivant :
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';
}
Le code n'est pas facile, veuillez l'aimer si vous l'aimez~
巴扎黑2017-05-16 13:10:51
Le texte actuel doit avoir un dom séparé, obtenir sa hauteur et sa hauteur de ligne et les calculer dynamiquement
曾经蜡笔没有小新2017-05-16 13:10:51
Pour donner une idée, vous pouvez définir la hauteur de ligne sur 20 px, puis une fois la page rendue, utilisez l'attribut offsetHeight du nœud en js, offsetHeight / 20
est le nombre de lignes