Javascript省略号错误地截断文本

Question

我有JavaScript代码，可以在文本上创建“更多”效果。代码会错误地影响文本，打破它并留下一个或两个字母，当您点击阅读更多时，它会添加换行符（它本不应该）。

我找不到为什么或如何避免这种情况。

• 不应该削减词语。
• 文字应该在同一行。

这是创建“更多阅读”效果的代码：

jQuery(document).ready(function($) {

  $('.slides-large').bxSlider({
    mode : 'fade',
    auto : true
  });

  jQuery('div.menu-main-menu-container').meanmenu();

  var showChar = 297;
  var ellipsestext = "...";
  var moretext = "Read more";
  var lesstext = "Show less";
  $('ul.people li.directors p, .advisory-boards ul.people li p').each(function() {
    var content = $(this).html();

    if (content.length > showChar) {
      var c = content.substr(0, showChar);
      var h = content.substr(showChar - 0, content.length - showChar);

      var html = c + '<span class="moreellipses">' + ellipsestext + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

      $(this).html(html);
    }

  });
  $(".morecontent > span").hide();
  $(".morelink").click(function() {
    if ($(this).hasClass("less")) {
      $(this).removeClass("less");
      $(this).html(moretext);
    } else {
      $(this).addClass("less");
      $(this).html(lesstext);
    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();
    return false;
  });
});

Answer 1

如果您只想说一句话，我建议您查看字符串上的lastIndexOf方法。你可以用它来找到一个单词（或标点符号）后面而不是单词中间的索引：

// Find the index of the first space before the cut-off point.
var showCharSpace = content.lastIndexOf(' ', showChar);
// Handle the corner case of there not being any spaces.
if (showCharSpace == -1) showCharSpace = showChar;

var c = content.substr(0, showCharSpace);
// and so on...

至于你的换行问题对我来说更像是一个CSS问题。元素是<span>元素，默认情况下是内联的。如果它们中断可能是因为它们已被更改为具有display: block;，这将使它们呈现为独立块而不是内联文本。尝试更改<span>元素的显示。