在上面的图像中点击...查看链接我正在显示包含描述的弹出窗口。以下是我的查询。
- 如何在列宽扩展到特定字符长度时显示链接。
例:考虑课程描述长度为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);
}
});
},
你可以做的是使用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则显示“查看”链接。