Можно ли определить, длиннее ли текста в моем div более одной строки?

У меня есть div с некоторым текстом, который изначально не переносится и показывает многоточие, но я хочу дать пользователю возможность щелкнуть опцию «Читать дальше», а затем развернуть div, чтобы отобразить весь фрагмент текста.

Однако я хочу иметь возможность определить, достаточно ли мал текст, чтобы поместиться в div, без необходимости расширять его из одной строки, и если это так, скройте параметр «Показать больше».

Вот ссылка на модифицированный JS Fiddle, над которым я работаю:

http://jsfiddle.net/M2APS/44/

И код из него:

$(document).bind('pageshow', function() {
  $(".text-size").click(function() {
    $(".ui-li > div").toggleClass("less");
    if ($(".text-size").html() == "Read more...") {
      $(".text-size").html("Read less...");
    } else {
      $(".text-size").html("Read more...");
    }
  });
});
.less {
  word-wrap: break-word;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.more {
  white-space: normal;
}

.text-size {
  display: block;
  text-align: right;
  padding-top: 10px;
  color: blue !important;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-role="page" id="p1">
  <div data-role="content">
    <ul data-role="listview" data-inset="true">
      <li data-role="list-divider">Item Title</li>
      <li>
        <div class="less">
          Need to detect if this text is long enough to show the "Read More" if it is not don't
        </div>
        <div class="text-size">Read more...</div>
      </li>
    </ul>
  </div>

</div>

Можно ли определить, достаточно ли короткий текст, чтобы поместиться в div, а затем скрыть параметр «Читать дальше»?


javascript html css
person Donal Rafferty    schedule 19.05.2014    source источник
comment
К вашему сведению, начиная с jQuery 1.7, метод .on() является предпочтительным методом для прикрепления обработчиков событий к документу.   -  person j08691    schedule 19.05.2014

Ответы (3)


arrow_upward
7
arrow_downward

Вы можете сравнить DIV width с scrollWidth, чтобы определить, не переполняется ли текст:

if ($('.less')[0].scrollWidth <= $('.less').width()) {
   $(".text-size").hide();
}

Демонстрация: http://jsfiddle.net/ygalanter/M2APS/50/

person Yuriy Galanter    schedule 19.05.2014
comment
Это работает только для меня для экранов полной ширины на рабочем столе. Можно ли динамически применять это к разным размерам экрана, поскольку мой мобильный веб-сайт будет просматриваться на разных телефонах и планшетах, и на них это, похоже, не работает? - person Donal Rafferty; 20.05.2014
comment
Можете ли вы попробовать указать фиксированную ширину DIV? Его можно рассчитать на основе текущей ширины экрана и задать в пикселях в JS-коде. - person Yuriy Galanter; 20.05.2014

arrow_upward
1
arrow_downward

Существует подключаемый модуль jQuery, который может удовлетворить ваши потребности: http://jedfoster.com/Readmore.js/

person eat-sleep-code    schedule 19.05.2014

arrow_upward
0
arrow_downward

Вероятно, это неполный текст, но вы можете захотеть сделать что-то на основе метода .height(), который предоставляет вам jQuery (http://api.jquery.com/height/)

$(document).bind('pageshow', function() {
if($(".ui-li > div").height() > 20) {
    $(".ui-li > div").addClass("less");
    $(".text-size").click(function(){
        $(".ui-li > div").toggleClass("less");
        if($(".text-size").html() == "Read more...")
        {
            $(".text-size").html("Read less...");
        }
        else
        {
            $(".text-size").html("Read more...");
        }
    });
} else {
    // one liner
     $(".text-size").hide();
}

});

Проверьте мое решение в скрипаче.

http://jsfiddle.net/gZe8b/

person Claudio    schedule 19.05.2014