【问题标题】:Intermittent Truncation using Jquery.dotdotdot使用 Jquery.dotdotdot 的间歇性截断
【发布时间】:2016-07-15 11:17:42
【问题描述】:

我正在使用 jquery.dotdotdot 来截断 Carousel 上的 Tiles 上的冗长文本。截断有时会间歇性地截断少于预期的结果。 (例如,将文本截断为 4 行,但在某些时候它只截断为 3 行。)

在我的 CSS 上,我以前有 4 行的公式是 Max-height = line-height * 4。

感谢任何回应。谢谢。 JS:

$(document).ready(function () { 
                EllipsisConfigFunction($(".module-body.dot-ellipsis"));

    function EllipsisConfigFunction($elements) {
        $elements.each(function () {
            var $element = $(this);
            $element.dotdotdot({
                // configuration goes here
                ellipsis: '... ',

                /*  How to cut off the text/html: 'word'/'letter'/'children' */
                wrap: 'word',

                /*  Wrap-option fallback to 'letter' for long words */
                fallbackToLetter: true,

                /*  jQuery-selector for the element to keep and put after the ellipsis. */
                after: null,

                /*  Whether to update the ellipsis: true/'window' */
                watch: true,

                /*  Optionally set a max-height, can be a number or function.
                    If null, the height will be measured. */
                height: null,

                /*  Deviation for the height-option. */
                tolerance: 0,

                /*  Callback function that is fired after the ellipsis is added,
                    receives two parameters: isTruncated(boolean), orgContent(string). */
                callback: function (isTruncated, orgContent) { },

                lastCharacter: {

                    /*  Remove these characters from the end of the truncated text. */
                    remove: [' ', ',', ';', '.', '!', '?'],

                    /*  Don't add an ellipsis if this array contains
                        the last character of the truncated text. */
                    noEllipsis: []
                }
            });
        });
    }
    });

CSS:

.module-body{
            max-height: 80px;
            overflow: hidden;
            position: relative;
            text-align: left;
            line-height:20px;
        }

【问题讨论】:

    标签: jquery css asp.net ellipsis jquery-dotdotdot


    【解决方案1】:

    由于您没有发布任何代码,我最好的建议如下:

    https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
    https://api.jquery.com/jQuery.trim/
    http://stackoverflow.com/a/4637957/5833940
    

    看看这些能否解决您的问题。

    最好的:)

    【讨论】:

    • 谢谢@SG1Asgard。我用代码更新了问题。感谢您的建议,但我需要一个跨浏览器的多行省略号。欣赏它。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-05-07
    • 1970-01-01
    • 2012-10-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多