fix: web text maxLines
This commit is contained in:
parent
49b9232f92
commit
87a485e5a2
23
doric-web/dist/index.js
vendored
23
doric-web/dist/index.js
vendored
@ -7204,6 +7204,7 @@ var doric_web = (function (exports, axios, sandbox) {
|
|||||||
const div = document.createElement('div');
|
const div = document.createElement('div');
|
||||||
div.style.display = "flex";
|
div.style.display = "flex";
|
||||||
div.style.overflow = "hidden";
|
div.style.overflow = "hidden";
|
||||||
|
div.style.lineHeight = `${this.lineHeight()}em`;
|
||||||
this.textElement = document.createElement('span');
|
this.textElement = document.createElement('span');
|
||||||
div.appendChild(this.textElement);
|
div.appendChild(this.textElement);
|
||||||
div.style.justifyContent = "center";
|
div.style.justifyContent = "center";
|
||||||
@ -7268,7 +7269,6 @@ var doric_web = (function (exports, axios, sandbox) {
|
|||||||
case "maxLines":
|
case "maxLines":
|
||||||
this.maxLines = prop;
|
this.maxLines = prop;
|
||||||
this.view.style.whiteSpace = 'normal';
|
this.view.style.whiteSpace = 'normal';
|
||||||
this.view.style.overflow = 'hidden';
|
|
||||||
break;
|
break;
|
||||||
case "maxWidth":
|
case "maxWidth":
|
||||||
if (prop) {
|
if (prop) {
|
||||||
@ -7301,7 +7301,7 @@ var doric_web = (function (exports, axios, sandbox) {
|
|||||||
if (this.maxLines > 0) {
|
if (this.maxLines > 0) {
|
||||||
const computedStyle = window.getComputedStyle(this.view);
|
const computedStyle = window.getComputedStyle(this.view);
|
||||||
const currentContentHeight = this.view.clientHeight - pixelString2Number(computedStyle.paddingTop) - pixelString2Number(computedStyle.paddingBottom);
|
const currentContentHeight = this.view.clientHeight - pixelString2Number(computedStyle.paddingTop) - pixelString2Number(computedStyle.paddingBottom);
|
||||||
let maxHeight = this.maxLinesHeight(computedStyle);
|
let maxHeight = parseFloat(computedStyle.getPropertyValue('font-size')) * this.lineHeight() * this.maxLines;
|
||||||
if (currentContentHeight > 0) {
|
if (currentContentHeight > 0) {
|
||||||
maxHeight = Math.min(maxHeight, Math.ceil(currentContentHeight));
|
maxHeight = Math.min(maxHeight, Math.ceil(currentContentHeight));
|
||||||
}
|
}
|
||||||
@ -7310,6 +7310,9 @@ var doric_web = (function (exports, axios, sandbox) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
lineHeight() {
|
||||||
|
return 1.3;
|
||||||
|
}
|
||||||
computedHeight(style) {
|
computedHeight(style) {
|
||||||
const tempEle = document.createElement('div');
|
const tempEle = document.createElement('div');
|
||||||
tempEle.style.font = style.font;
|
tempEle.style.font = style.font;
|
||||||
@ -7321,22 +7324,6 @@ var doric_web = (function (exports, axios, sandbox) {
|
|||||||
document.body.removeChild(tempEle);
|
document.body.removeChild(tempEle);
|
||||||
return height;
|
return height;
|
||||||
}
|
}
|
||||||
maxLinesHeight(style) {
|
|
||||||
let text = '';
|
|
||||||
for (let i = 0; i < this.maxLines; i++) {
|
|
||||||
text += 'Test测试😊\n';
|
|
||||||
}
|
|
||||||
const tempEle = document.createElement('div');
|
|
||||||
tempEle.style.font = style.font;
|
|
||||||
tempEle.textContent = text;
|
|
||||||
tempEle.style.width = this.view.style.width;
|
|
||||||
tempEle.style.whiteSpace = 'pre';
|
|
||||||
tempEle.style.overflow = 'hidden';
|
|
||||||
document.body.appendChild(tempEle);
|
|
||||||
const height = tempEle.offsetHeight;
|
|
||||||
document.body.removeChild(tempEle);
|
|
||||||
return height;
|
|
||||||
}
|
|
||||||
truncationText(style, maxHeight) {
|
truncationText(style, maxHeight) {
|
||||||
const originalText = this.textElement.innerText;
|
const originalText = this.textElement.innerText;
|
||||||
let start = 0, end = originalText.length;
|
let start = 0, end = originalText.length;
|
||||||
|
2
doric-web/dist/index.js.map
vendored
2
doric-web/dist/index.js.map
vendored
File diff suppressed because one or more lines are too long
@ -8,6 +8,7 @@ export class DoricTextNode extends DoricViewNode {
|
|||||||
const div = document.createElement('div')
|
const div = document.createElement('div')
|
||||||
div.style.display = "flex"
|
div.style.display = "flex"
|
||||||
div.style.overflow = "hidden"
|
div.style.overflow = "hidden"
|
||||||
|
div.style.lineHeight = `${this.lineHeight()}em`
|
||||||
this.textElement = document.createElement('span')
|
this.textElement = document.createElement('span')
|
||||||
div.appendChild(this.textElement)
|
div.appendChild(this.textElement)
|
||||||
div.style.justifyContent = "center"
|
div.style.justifyContent = "center"
|
||||||
@ -69,7 +70,6 @@ export class DoricTextNode extends DoricViewNode {
|
|||||||
case "maxLines":
|
case "maxLines":
|
||||||
this.maxLines = prop as number
|
this.maxLines = prop as number
|
||||||
this.view.style.whiteSpace = 'normal'
|
this.view.style.whiteSpace = 'normal'
|
||||||
this.view.style.overflow = 'hidden'
|
|
||||||
break
|
break
|
||||||
case "maxWidth":
|
case "maxWidth":
|
||||||
if (prop) {
|
if (prop) {
|
||||||
@ -102,7 +102,7 @@ export class DoricTextNode extends DoricViewNode {
|
|||||||
if (this.maxLines > 0) {
|
if (this.maxLines > 0) {
|
||||||
const computedStyle = window.getComputedStyle(this.view)
|
const computedStyle = window.getComputedStyle(this.view)
|
||||||
const currentContentHeight = this.view.clientHeight - pixelString2Number(computedStyle.paddingTop) - pixelString2Number(computedStyle.paddingBottom)
|
const currentContentHeight = this.view.clientHeight - pixelString2Number(computedStyle.paddingTop) - pixelString2Number(computedStyle.paddingBottom)
|
||||||
let maxHeight = this.maxLinesHeight(computedStyle)
|
let maxHeight = parseFloat(computedStyle.getPropertyValue('font-size')) * this.lineHeight() * this.maxLines
|
||||||
if (currentContentHeight > 0) {
|
if (currentContentHeight > 0) {
|
||||||
maxHeight = Math.min(maxHeight, Math.ceil(currentContentHeight))
|
maxHeight = Math.min(maxHeight, Math.ceil(currentContentHeight))
|
||||||
}
|
}
|
||||||
@ -112,6 +112,10 @@ export class DoricTextNode extends DoricViewNode {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
lineHeight() {
|
||||||
|
return 1.3
|
||||||
|
}
|
||||||
|
|
||||||
computedHeight(style:CSSStyleDeclaration) {
|
computedHeight(style:CSSStyleDeclaration) {
|
||||||
const tempEle = document.createElement('div')
|
const tempEle = document.createElement('div')
|
||||||
tempEle.style.font = style.font
|
tempEle.style.font = style.font
|
||||||
@ -125,23 +129,6 @@ export class DoricTextNode extends DoricViewNode {
|
|||||||
return height
|
return height
|
||||||
}
|
}
|
||||||
|
|
||||||
maxLinesHeight(style:CSSStyleDeclaration) {
|
|
||||||
let text = ''
|
|
||||||
for (let i = 0; i < this.maxLines; i++) {
|
|
||||||
text += 'Test测试😊\n'
|
|
||||||
}
|
|
||||||
const tempEle = document.createElement('div')
|
|
||||||
tempEle.style.font = style.font
|
|
||||||
tempEle.textContent = text
|
|
||||||
tempEle.style.width = this.view.style.width
|
|
||||||
tempEle.style.whiteSpace = 'pre';
|
|
||||||
tempEle.style.overflow = 'hidden';
|
|
||||||
document.body.appendChild(tempEle)
|
|
||||||
const height = tempEle.offsetHeight
|
|
||||||
document.body.removeChild(tempEle)
|
|
||||||
return height
|
|
||||||
}
|
|
||||||
|
|
||||||
truncationText(style:CSSStyleDeclaration, maxHeight:number) {
|
truncationText(style:CSSStyleDeclaration, maxHeight:number) {
|
||||||
const originalText = this.textElement.innerText
|
const originalText = this.textElement.innerText
|
||||||
let start = 0, end = originalText.length
|
let start = 0, end = originalText.length
|
||||||
|
Reference in New Issue
Block a user