# When using sp-heading long text content does not fit in dialog

**URL:** <https://forums.creativeclouddeveloper.com/t/when-using-sp-heading-long-text-content-does-not-fit-in-dialog/3924>\
**Category:** UXP Plugin API\
**Created:** [November 23, 2021, 12:33pm UTC](https://forums.creativeclouddeveloper.com/t/when-using-sp-heading-long-text-content-does-not-fit-in-dialog/3924 "2021-11-23T12:33:54Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lars](https://avatars.discourse-cdn.com/v4/letter/l/74df32/32.png) [@Lars](https://forums.creativeclouddeveloper.com/u/Lars)\
**Post date:** [November 23, 2021, 12:33pm UTC](https://forums.creativeclouddeveloper.com/t/when-using-sp-heading-long-text-content-does-not-fit-in-dialog/3924/1 "2021-11-23T12:33:54Z")

</div>

Hello,  
I’ve encountered a problem in my dialog when I paste very long words in it, which are wider then the dialog is. My dialog texts are variable and can contain words which are longer than the dialog is wide.

The dialog is created programmatically but I’ve the same problem when I use an HTML file.  
In this screenshot the debug feature from the UXP tool is used to display the padding:

 ![dialog_auto](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/7/71371490a0b9f0e2343063a3e14455d35823fe4e.png)

Below is my sample code which from my opinion should work. As you can see I use the `sp-heading` -tag and set the text via `textContent`. This way the long word overlaps the padding of the dialog.  
I’ve found a workaround by adding a `div`-tag as child and assign the text to the child’s `textContent`. Does anybody else encountered the problem? Why do I have to add the extra tag?

Here’s the sample to show my dialog:

```auto
showModal = async (dialogSize={width: 480, height: 240}) => {

const [dlgEl, formEl, headingEl, buttonGroupEl, footerEl] = 
    ["dialog", "form", "sp-heading", "sp-button-group", "footer"]
    .map(tag => document.createElement(tag));

    [headingEl, footerEl].forEach(el => {
        el.style.margin="6px";
        el.style.width="calc(100% - 12px)";
    });
    headingEl.style.wordBreak="break-word";
    headingEl.style.display="inline-block";

    buttonGroupEl.style.margin="5px 8px";
    buttonGroupEl.style.flexDirection="row";

    formEl.setAttribute("method", "dialog");
    formEl.style.width="auto"
    formEl.style.height="auto"
    
    headingEl.setAttribute("size", "XS")
    headingEl.setAttribute("font-size", "large")
    headingEl.textContent = "Heading text content here_s_a_very_loooong_text_which_does_not_fit_in_the_given_dialog_width"

    const buttonElement = document.createElement("sp-button");
    buttonElement.textContent = "OK"
    buttonElement.setAttribute("variant", "cta") //warning
    buttonElement.setAttribute("autofocus", "autofocus");
    buttonElement.onclick = () => {
        dlgEl.close("close");
    }
    buttonGroupEl.appendChild(buttonElement);

    footerEl.appendChild(buttonGroupEl);

    [headingEl, footerEl].forEach(el => formEl.appendChild(el));
    dlgEl.appendChild(formEl);

    document.body.appendChild(dlgEl);

    const r = await dlgEl.uxpShowModal({
        title: "Dialog Title",
        resize: "both",
        size: dialogSize
    });
    dlgEl.remove();
}

```

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [November 23, 2021, 3:30pm UTC](https://forums.creativeclouddeveloper.com/t/when-using-sp-heading-long-text-content-does-not-fit-in-dialog/3924/2 "2021-11-23T15:30:34Z")

</div>

I’d suggest using `break-word`, but [I couldn’t make it work](http://forums.creativeclouddeveloper.com/t/any-plans-to-support-css-transform/3887/2)