DisplayField overflow ellipsis in ExtJS 5

Question

I want to set text-overflow : ellipsis in displayField, but when add a large text, displayfield groving horizontally.

displayField:

 xtype: 'displayfield',
        border: 1,
        style: {
            borderColor: 'black',
            borderStyle: 'solid'
        },
        maxHeight:50,
        cls:'custom-field',
        height:50,
        width: 100,
        value: 'this is <br/> a multiline text<br/> and it should be ended <br/>with three dots when overflowY',

css class:

.custom-field{
    text-overflow: ellipsis;
}

example on fiddle: https://fiddle.sencha.com/#fiddle/ole