Question

我有一个有两列的表，第二个有时包含大文本，所以我只想显示前100个字符，并显示更多链接以显示剩余的文本。您可以在此处查看我正在使用的http://jsfiddle.net/j11mj21x/表。

为此，我使用此链接（http://viralpatel.net/blogs/dynamically-shortened-text-show-more-link-jquery/）中提供的代码，我将其放在show_less_more.js文件中：

 (function($) {
$.fn.shorten = function (settings) {

    var config = {
        showChars: 100,
        ellipsesText: "...",
        moreText: "more",
        lessText: "less"
    };

    if (settings) {
        $.extend(config, settings);
    }

    $(document).off("click", '.morelink');

    $(document).on({click: function () {

            var $this = $(this);
            if ($this.hasClass('less')) {
                $this.removeClass('less');
                $this.html(config.moreText);
            } else {
                $this.addClass('less');
                $this.html(config.lessText);
            }
            $this.parent().prev().toggle();
            $this.prev().toggle();
            return false;
        }
    }, '.morelink');

    return this.each(function () {
        var $this = $(this);
        if($this.hasClass("shortened")) return;

        $this.addClass("shortened");
        var content = $this.html();
        if (content.length > config.showChars) {
            var c = content.substr(0, config.showChars);
            var h = content.substr(config.showChars, content.length - config.showChars);
            var html = c + '<span class="moreellipses">' + config.ellipsesText + ' </span><span class="morecontent"><span>' + h + '</span> <a href="#" class="morelink">' + config.moreText + '</a></span>';
            $this.html(html);
            $(".morecontent span").hide();
        }
    });

};

})(jQuery);
$(document).ready(function(){$(".descriptionText").shorten();});

我正在使用它：

    <script src="show_less_more.js"></script>"

每行的HTML都是这样的：

    <tr>
      <th>
        course1
      </th>
      <td> <div class="descriptionText">Description of the course</div></td>
    </tr>

我还为越来越少的链接添加了CSS：

        a {
        color: #0254EB
        }
        a:visited {
        color: #0254EB
        }
        a.morelink {
        text-decoration:none;
        outline: none;
        }
        .morecontent span {
        display: none;
        }

当我在sfiddle中这样做时，它可以很好地工作，你可以在这里看到http://jsfiddle.net/j11mj21x/2/ 但是，在使用python渲染我的表时，我什么也得不到。我认为问题在于我没有成功将我的JS页面加载到html页面，因为当我点击它时它什么都没有。这是在我的html页面中呈现的内容：

 ....
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"><!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"><!-- Latest compiled and minified JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">
</script><script src="showLessMore.js"></script>
....

任何人都可以告诉我这可能是什么问题，因为我有＆＃34; show_less_more.js＆＃34;在与python中的文件生成器相同的文件夹中？

提前谢谢！

Answer 1

这是一个简单的例子，更多地依赖CSS。

＆＃13;

$(function() {

  $('a').click(function() {
    $('div').removeClass('ellipsis');
  });
  
});

＆＃13;

div {
  border: solid 1px orange;
  width: 200px;
  overflow: hidden;
}

.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='ellipsis'>Some really really long text that just is way too long so we must use ellipses to shorten it until the user wants to see it all.</div>
<br>
<a href='#'>Show All</a>

＆＃13;

根据文本长度自动在表格中显示更多/更少的文本

1 个答案: