截断使用 show less /more 选项绑定的多行 HTML

Posted 2023-04-12

【中文标题】截断使用 show less /more 选项绑定的多行 HTML

【英文标题】：Truncate multi-line HTML bound with show less /more option

【发布时间】：2015-06-22 09:19:47

【问题描述】：

我有与此question 类似的问题。此解决方案的问题是 jquery.autoellipsis 会降低我的应用程序的速度，并且还需要进行更改才能添加 显示更多/更少 功能。

在我的例子中，我从 ng-repeat 中的 ng-bind-html 获取作为 html 代码的动态内容。

  <ion-item ng-repeat="page in pages">
     <div ng-bind-html="page.extract" class="item item-text-wrap"></div>
  </ion-item>

我想要一个指令在 X 像素（高度）或 Y 行之后截断 html 代码，并显示选项 查看更多/更少 以防有内容显示。

我发现的大多数解决方案仅适用于纯文本或需要其他插件，例如 More。

谢谢。

【参考方案1】：

在测试了一些可用的 Jquery 插件后，这是效果最好的插件：Trunk8

原因：

加载速度更快。 适用于普通测试和 html（代码不多）。 Costumization 可以在指令中完成。

步骤：

下载Trunk8 添加对jQuery 和插件的访问权限：trunk8.js 创建指令（见下文） 添加对指令的访问权限（如有必要） 从 app.js 访问 modude：var app = angular.module('app', ['ellipsis']) 从您的角度调用指令。

指令：

angular.module( 'ellipsis', [])
    .directive('ellipsis', [function () 
    return 
        required: 'ngBindHtml',
        restrict: 'A',
        priority: 100,
        link: function ($scope, element, attrs, ctrl) 
            $scope.hasEllipsis = false;
            $scope.$watch(element.html(), function(value) 
               if (!$scope.hasEllipsis) 
                   // apply this code ONCE
                   $scope.hasEllipsis = true;
                   $(element).trunk8(
                        fill: '&hellip; <a id="read-more" href="#">read more</a>', /*(Default: '&hellip;') The string to insert in place of the omitted text. This value may include HTML.*/
                        lines: 3, /*(Default: 1) The number of lines of text-wrap to tolerate before truncating. This value must be an integer greater than or equal to 1.*/
                        //side: 'right', /*(Default: 'right') The side of the text from which to truncate. Valid values include 'center', 'left', and 'right'.*/
                        tooltip: false, /*(Default: true) When true, the title attribute of the targeted HTML element will be set to the original, untruncated string. Valid values include true and false.*/
                        //width: 'auto', /*(Default: 'auto') The width, in characters, of the desired text. When set to 'auto', trunk8 will maximize the amount of text without spilling over.*/
                        parseHTML: true /*(Default: 'false') When true, parse and save html structure and restore structure in the truncated text.*/
                        //onTruncate /*(Callback): Called after truncation is completed.*/
                   );
                   $(element).on('click', '#read-more', function (event) 
                        $(element).trunk8('revert').append(' <a id="read-less" href="#">read less</a>');
                   );
                   $(element).on('click', '#read-less', function (event) 
                        $(element).trunk8();
                   );
                
            );
        
    ;
]);

查看：

<ion-item ng-repeat="page in pages">
  <div ng-bind-html="page.extract" class="item item-text-wrap" ellipsis></div>
</ion-item>

【参考方案2】：

当我谷歌搜索“角度省略号指令”时的第一个结果 - 你尝试过吗？

https://github.com/dibari/angular-ellipsis

【讨论】：

我做了 Raymond，该指令的问题在于它不适用于 html。无论如何感谢您的帮助。

只使用 CSS 怎么样？ css-tricks.com/snippets/css/truncate-string-with-ellipsis

它确实有效，文本被截断并出现省略号。仍然缺少显示更少/更多的部分，我正在寻找一个 CSS 解决方案。谢谢！