Elm-ui - clip text on a single line

Show and Tell
1

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

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

2

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

                   , 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

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

3

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