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

问题描述 投票:0回答:1

在上面的图像中点击...查看链接我正在显示包含描述的弹出窗口。以下是我的查询。

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

例:考虑课程描述长度为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);
                }
            });
        },
javascript jquery html css
1个回答
1
投票

你可以做的是使用text-overflow: ellipsis;实现这一点。只需将此css添加到“course-container”类:

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

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

现在关于view链接,您可以更改省略号行为,而不是显示'...',您将显示'... view'(使用弹出链接)。

或者(更好的方法)你可以检查内容是否溢出:

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

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

© www.soinside.com 2019 - 2024. All rights reserved.