diff --git a/changelog.md b/changelog.md index 4865f27b5c..3a43f6b236 100644 --- a/changelog.md +++ b/changelog.md @@ -1,4 +1,7 @@ # 更新日志 +2.0(2020-09) +- bi.label支持多行文本溢出显示...(仅支持webkit内核) + 2.0(2020-08) - bi.sign_editor支持显示值居左/居中/居右显示 - bi.iframe新增EVENT_LOADED事件 diff --git a/demo/js/base/demo.label.js b/demo/js/base/demo.label.js index 0f5158f134..e9a69daf79 100644 --- a/demo/js/base/demo.label.js +++ b/demo/js/base/demo.label.js @@ -104,6 +104,14 @@ Demo.Label = BI.inherit(BI.Widget, { textWidth: 200, textHeight: 30, height: 60 + }, { + type: "bi.label", + cls: "layout-bg1", + text: "label设置了宽度, 并且设置了显示行数是2行, 无论输入多少文本,在允许换行的情况下只会显示2行,并在第二行结尾出现...", + textAlign: "left", + width: 300, + lineNumber: 2, + whiteSpace: "normal" }, { type: "bi.left", items: [{ diff --git a/src/base/single/label/label.js b/src/base/single/label/label.js index 101fdeb3d5..362083dc26 100644 --- a/src/base/single/label/label.js +++ b/src/base/single/label/label.js @@ -17,6 +17,7 @@ BI.Label = BI.inherit(BI.AbstractLabel, { textAlign: o.textAlign, whiteSpace: o.whiteSpace, lineHeight: o.textHeight, + lineNumber: o.lineNumber, text: o.text, value: o.value, py: o.py, diff --git a/src/base/single/text.js b/src/base/single/text.js index 823843bfcd..2272fb15b0 100644 --- a/src/base/single/text.js +++ b/src/base/single/text.js @@ -20,7 +20,8 @@ bgap: 0, text: "", py: "", - highLight: false + highLight: false, + lineNumber: null, }, render: function () { @@ -54,12 +55,20 @@ if (BI.isWidthOrHeight(o.maxWidth)) { this.element.css({maxWidth: o.maxWidth}); } - this.element.css({ + var cssObj = { textAlign: o.textAlign, whiteSpace: this._getTextWrap(), textOverflow: o.whiteSpace === "nowrap" ? "ellipsis" : "", - overflow: o.whiteSpace === "nowrap" ? "" : (BI.isWidthOrHeight(o.height) ? "auto" : "") - }); + overflow: o.whiteSpace === "nowrap" ? "" : (BI.isWidthOrHeight(o.height) ? "auto" : ""), + }; + if (BI.isNumber(o.lineNumber)) { + BI.extend(cssObj, { + display: "-webkit-box", + "-webkit-line-clamp": o.lineNumber + "", + "-webkit-box-orient": "vertical", + }); + } + this.element.css(cssObj); if (o.handler && o.handler !== BI.emptyFn) { this.text = BI.createWidget({ type: "bi.layout",