CODEWITHSUNDEEP
qmlqt5qtquick2
Jeggu
Jeggu

Reputation: 579

How to set text inside Text componenttext content not to exceed its width and height in QML

I have a Rectangle and on top of it there is a Text item. Text contained in the latter does exceeding its boundary.

Here is my code:

Rectangle{
    width: 100
    height: 100
    anchors.centerIn: parent
    color: "lightblue"

    Text{
        width: parent.width
        height: parent.height
        text: "hi hello how are you. good how do you dosdfskdjgbksajgsjdfsjadfsad \n"+
              "sdfvbjsdkfjsbdvfsd sjkdbfvskdbfvskdbvs,dv jskbdvksdbvasd \n"+
              "sajbfwkbedcv klanfuoigbefhbsdaf csa djsdagfbksdjbfvsadkjvABEGFW\n"+
              "JGBGFWJAHGRJWEKHYJGWKGBFWHE  gofdgfdfgdf"
        wrapMode: Text.WordWrap
        fontSizeMode: Text.Fit
    }

}

Upvotes: 0

Views: 343

Answers (1)

Mitch
Mitch

Reputation: 24416

It's documented:

Text.WordWrap - wrapping is done on word boundaries only. If a word is too long, contentWidth will exceed a set width.

That's what's happening with your text. You probably want to use Text.Wrap:

Text.Wrap - if possible, wrapping occurs at a word boundary; otherwise it will occur at the appropriate point on the line, even in the middle of a word.

Combined with some eliding, the text will fit perfectly within the Rectangle:

elide: Text.ElideRight

Upvotes: 0

Related Questions