QML: Wrap Text to height when using RichText

2
votes

I'm trying to display a long(ish) HTML file in a QML Text object.

When the text is longer than can be displayed in the current viewport, it gets chopped off (i.e. only half of the last line of text is shown and the bottom half is hidden).

Ordinarily, I'd use elide or maximumLineCount, but none of those properties work when using Rich Text. Since this is a full HTML document it has to be RichText not StyledText.

Example:

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

What kind of properties/changes could I add to either the Text or the Rectangle to make it only show the text that can be shown in the given width and height?

The only other question related to this one that I could find was Qml: use Text's elide property with textFormat: RichText, but that wasn't practical in my case.

1
qtqmlqt5

1 Answers

1
votes

You'd be better wrapping your Text component inside a container like ScrollView. Flickable is another alternative.

ScrollView {
  width: 300
  height: 400
  clip: true

  Text {
    id: text
    textFormat: Text.RichText
    text: "..."
  } 
}

Or... if you really want to put the text inside a Rectagle and clip its content, then simply set clip property of your Rectangle to true.

Rectangle {
    width: 300
    height: 400
    clip: true

    Text {
    }
}