Question

Table Grid Image

在上面的 ... view 链接的onclick图片中，我正在显示包含说明的弹出窗口。下面是我有的查询。

如何显示在扩展列宽直到特定字符长度时的链接。

例如：考虑课程描述长度为50个字符，因此在将列拉伸到第49个字符时，我需要显示链接，超过50个字符后，该链接应消失。

            require(["jslib/require/text!js/isd/templates/test.html"], function (FooterTemplate) {
                if(value !== null){
                    element.html("<div class='course-container'>"+value.substr(0,18)+"</div>");

                    var iconBind = $("<a class='course-link'  href=\"javascript:\" >  " + "...view" + "</a>");
                    var body = "<div style='height:200px;width:400px'>"+value+"</div>";

                    iconBind.bind("click", {
                        model: model
                    }, function () {
                        var TestApp = require("js/app/TestApp");
                        var ModalLayout = require("js/common/layouts/ModalLayout");
                        var modalLayout = new ModalLayout({
                            title: "Course Description",
                            footerTemplate: FooterTemplate
                        });
                        TestApp.getView().getRegion('modalRegion').show(modalLayout);
                        modalLayout.getRegion('modalContentRegion').show(body);
                    });
                    element.find('.course-container').append(iconBind);
                }
            });
        },

Answer 1

您可以做的是使用text-overflow: ellipsis;来实现。只需将此CSS添加到您的“课程容器”类中即可：

.course-container {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

这样，当您拉伸容器时它将显示更多文本，并在完全显示时删除“ ...”。

现在有关view链接，您可以更改省略号的行为，而不是显示“ ...”，而是显示“ ...视图”（带有弹出链接）。

或者（一种更好的方法），您可以检查内容是否溢出：

element = document.getElementById('your-element-id');
if (element.scrollWidth > element.clientWidth)

如果为true，则显示“查看”链接。

如何在表格网格中隐藏/显示特定长度内的更多文本

1 个答案: