QML:使用富文本时将文本换行到高度



我正在尝试在QMLText对象中显示一个长(ish(HTML文件。

当文本的长度超过当前视口中显示的长度时,它会被切断 (即仅显示最后一行文本的一半,而隐藏下半部分(。

通常,我会使用 elide 或 maximumLineCount,但在使用 Rich Text 时,这些属性都不起作用。 由于这是一个完整的HTML文档,它必须是富文本而不是样式文本。

例:

Rectangle {
width: 300;
height: 400;
Text {
id: text
anchors.fill: parent
textFormat: Text.RichText
wrapMode: Text.Wrap
text: "..."
}
}

我可以向文本或矩形添加什么样的属性/更改,使其仅显示可以以给定宽度和高度显示的文本?

我能找到的唯一与此相关的另一个问题是Qml:将Text的elide属性与textFormat:RichText一起使用,但这在我的情况下是不切实际的。

你最好将Text组件包装在像ScrollView这样的容器中。可轻拂是另一种选择。

ScrollView {
width: 300
height: 400
clip: true
Text {
id: text
textFormat: Text.RichText
text: "..."
} 
}

或者......如果您真的想将文本放入Rectagle并剪辑其内容,则只需将Rectangle的属性设置为trueclip

Rectangle {
width: 300
height: 400
clip: true
Text {
}
}

我仍在寻找比下面更好的解决方案。有了更好的,我的意思不是可以进行二进制搜索,而不是从最后缩小。

var paras = content.text.match(/<p(.*?)>.*?</p>/g);
if (content.contentHeight > content.height) {
for (let i = paras.length - 1; i >= 0; i--) {
let para = paras[i];
let words = para.replace('</p>','').split(' ');
for (let j = words.length - 1; j >= 0; j--) {
paras[i] = words.slice(0, j).join(' ') + '</p>';
content.text = paras.join('');
if (content.contentHeight <= content.height) break;
}
if (content.contentHeight <= content.height) break;
}
}

来自CSS:你能防止溢出:隐藏从截断最后一行文本吗? 和QML文本:如何使用CSS属性,例如文本装饰:overline 我尝试了下面的解决方案是否可以用作文本属性。只是后来才发现 QT 中(尚(不支持列宽。

<html>
<body>
<div style="width: 1168px; height: 576px; overflow: hidden;">
<div style="column-width: 1168px; -webkit-column-width:1168px; height: 576px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<body>
</html>

最新更新