Блог

Главная - Вопросы по программированию - Как посчитать количество строк в статье с помощью jQuery?

Как посчитать количество строк в статье с помощью jQuery?

#javascript #jquery

#язык JavaScript #jquery

Вопрос:

Извините, в настоящее время у меня есть требование, например, код, который я предоставил~

Мне нужно использовать jquery, чтобы определить, сколько строк содержит исходная статья. Хотя в настоящее время он отображается на экране в 2 строки, это потому, что я использовал CSS для настройки, но мне нужно знать, сколько строк в исходной статье~

Поскольку я новичок в программировании, я не знаю, как это сделать, я надеюсь, что смогу получить вашу помощь, спасибо

 .info{  font-size: 15px;  letter-spacing:1px;  line-height: 1.5;  margin-bottom: 8px;  letter-spacing:0;  overflow:hidden;  text-overflow:clip;  display:-webkit-box;  -webkit-box-orient:vertical;   -webkit-line-clamp:2; } 
 lt;div class="info"gt;  我是文章我是文章我是文章我是文章我是lt;brgt;  文章我是文章我是文章我是文章  我是文章我是文章我是文章我是文章我是lt;brgt;  文章我是文章我是文章我是文章  文章我是文章我是文章我是文章  文章我是文章我是文章我是文章 lt;/divgt;

Комментарии:

1. Зависит от того, как вы определяете «линию». В вашем коде есть 2 lt;brgt; строки, так что это можно считать ровно 3 строками. Но с css это может быть более 20 строк.

2. var lineCount = $(".info").html().split("lt;brgt;").length даст вам количество строк, как я это вижу (3), .html().split("n").length будет количество строк в источнике (8), но будет зависеть от компоновки, так что, вероятно, не так много пользы.

Ответ №1:

Вы можете получить высоту одного символа внутри контейнера, а затем разделить общую высоту контейнера, чтобы получить количество строк. Я привел простой пример ниже, я не знаком с китайской типографикой, поэтому не могу точно сказать, является ли это полностью надежным решением.

 $('#count').click(function() {  var info = $('.info');  var divTemp = $('#temp');  divTemp.html(info.html());  var divChar = document.createElement('div');  divChar.innerText = '文';  info.prepend(divChar);  var lineCount = Math.round(divTemp.height() / divChar.clientHeight);  $('#result').text(lineCount);  $(divTemp).html('');  $(divChar).remove(); }) 
 .info {  font-size: 15px;  letter-spacing: 1px;  line-height: 1.5;  margin-bottom: 8px;  letter-spacing: 0;  overflow: hidden;  text-overflow: clip;  display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 2; } #temp {  font-size: 15px;  letter-spacing: 1px;  line-height: 1.5;  margin-bottom: 8px;  letter-spacing: 0;  text-overflow: clip;  display: -webkit-box;  -webkit-box-orient: vertical;  /* same as .info except the line clamp */ } 
 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;div class="info"gt;  我是文章我是文章我是文章我是文章我是lt;brgt;  文章我是文章我是文章我是文章  我是文章我是文章我是文章我是文章我是lt;brgt;  文章我是文章我是文章我是文章  文章我是文章我是文章我是文章  文章我是文章我是文章我是文章 lt;/divgt; lt;div id="temp"gt;lt;/divgt; lt;!-- .info and #temp should be under the same parent --gt;  lt;span id="result"gt;lt;/spangt; lt;button id="count"gt;Countlt;/buttongt;
Метки: