Wrapping text inside non-rectangular shape properly

[igo]

Hi, is it possible to wrap text inside a non-rectangular shape so that it does not overlap the shape? By default textWrap on the label ignores the shape (which makes sense but is ugly):

[kumilingus]

You will have to wrap the text inside an inscribed rectangle instead.

const ellipse = new joint.shapes.standard.Ellipse({
    size: { width: 200, height: 100 },
    attrs: {
        label: {
            text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec elit viverra, dapibus massa nec, pretium tortor. Duis id velit ultrices, efficitur tortor vitae, tristique erat. Donec tristique imperdiet facilisis. Pellentesque id tincidunt justo, in lobortis dui. Fusce nec dolor quis ligula egestas porttitor a porttitor mauris. Quisque tincidunt, arcu id dictum tempor, felis augue varius arcu, ac aliquet elit nibh dapibus erat. Nunc urna mauris, viverra vitae ullamcorper ac, mattis dapibus enim. Proin sed congue odio.',
            textWrap: {
                width: '70%',
                height: '70%',
                ellipsis: true
            }
        }
    }
});

[igo]

Thanks for the feedback! Is there other technique that is not restricted to rectangle?

[kumilingus]

You can break the text yourself as explained here: https://stackoverflow.com/a/17716400/2921495

Or use SVGForeignObject with an HTMLDiv and shape-outside CSS property (https://css-tricks.com/using-css-to-set-text-inside-a-circle/)