# Elm-ui - clip text on a single line

**URL:** <https://discourse.elm-lang.org/t/elm-ui-clip-text-on-a-single-line/10576>\
**Category:** Show and Tell\
**Created:** [March 10, 2026, 3:13pm UTC](https://discourse.elm-lang.org/t/elm-ui-clip-text-on-a-single-line/10576 "2026-03-10T15:13:59Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![progger](https://avatars.discourse-cdn.com/v4/letter/p/5daacb/32.png) [@progger](https://discourse.elm-lang.org/u/progger)\
**Post date:** [March 10, 2026, 3:13pm UTC](https://discourse.elm-lang.org/t/elm-ui-clip-text-on-a-single-line/10576/1 "2026-03-10T15:13:59Z")

</div>

Here’s an egregious elm-ui hack that clips long text on a single line, no matter how long it is, even if it has no spaces.

Basically you make your text element a paragraph so it will flow onto the next line. Then give it these attribs:

clipX  
height fontsize  
htmlAttribute (style “word-break” “break-word”)

[https://ellie-app.com/y9JDS5fLhhfa1](https://ellie-app.com/y9JDS5fLhhfa1)

Its awful but it works. Might get unwanted scroll bars sometimes. Got a better way to do it?

---

<div class="post-metadata">

**Author:** ![progger](https://avatars.discourse-cdn.com/v4/letter/p/5daacb/32.png) [@progger](https://discourse.elm-lang.org/u/progger)\
**Post date:** [March 13, 2026, 3:13pm UTC](https://discourse.elm-lang.org/t/elm-ui-clip-text-on-a-single-line/10576/2 "2026-03-13T15:13:53Z")

</div>

This one gets rid of scroll bars with overflow=clip:

```auto
                   , E.paragraph [ 
                        E.height (E.px <| fontsize * 5 // 4)
                        , E.htmlAttribute (HA.style "overflow-wrap" "anywhere")
                        , E.htmlAttribute (HA.style "overflow" "clip")
                        ]
                        [E.text s]

```

[https://ellie-app.com/yc47N8YkXMDa1](https://ellie-app.com/yc47N8YkXMDa1)

Scroll bars weren’t visible in the ellie, but came up in my app.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [March 23, 2026, 3:14pm UTC](https://discourse.elm-lang.org/t/elm-ui-clip-text-on-a-single-line/10576/3 "2026-03-23T15:14:15Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.