How to hide text in QML TextInput if it is out of bounds

Question

I try to hide the text if it width more then Rectangle id: field. But it does not work "from the box". How can I hide text if the width of text bigger then Rectangle's (where TextInput location) width?

    Rectangle {
        id: field
        border.color: "green"
        border.width: 2
        anchors.centerIn: parent
        width:  root.width / 2
        height: 30

        TextInput {
            id: textEdit1

            anchors.verticalCenter: parent.verticalCenter
            anchors.right: okButton.left
            width: field.width - okButton.width
            height: field.height
            text: "Entered"
            padding: 3
            verticalAlignment: TextInput.AlignVCenter
            horizontalAlignment: TextInput.AlignLeft
        }

        Button {
            id: okButton

            width: field.width * 0.15
            height: parent.height
            anchors.right: field.right
            anchors.verticalCenter: field.verticalCenter
            text: "Ok"
        }

Answer 1

You can enable the clip property of the Rectangle:

Rectangle {
    id: field
    clip: true
    // ...