overflow.elm

import Html exposing (div, button, text, p)
import Html.App exposing (beginnerProgram)
import Html.Events exposing (onClick, on, targetValue)
import Html.Attributes exposing (style)
import Json.Decode as Json

main =
  beginnerProgram { model = init, view = view, update = update }

-- Model
init = { content = smallContent, height = 100, overflowing = False }

-- Update
      
type Msg
  = ToggleText
  | OverFlow Float
  | UnderFlow Float


update msg model =
  case msg of
    OverFlow val ->
       { model | overflowing = True }
       
    UnderFlow val ->
       { model | overflowing = False }
      
    ToggleText ->
      let
        newContent = if model.content == smallContent then
                        largeContent
                      else
                        smallContent
      in
        { model | content = newContent}

-- View


view model =
  div []
      [ div [ style [ ("overflow", "hidden"), ("height", "90px"), ("width", "300px"), ("background-color", "teal") ]
            , on "overflow" (Json.map OverFlow getDetails)
            , on "underflow" (Json.map UnderFlow getDetails
            ]
            [ p [] [ text model.content ] ]
      , button [ onClick ToggleText ] [ text "Toggle Text" ]
      , readMoreBtn model
      ]

readMoreBtn model = 
  if model.overflowing then
    button [] [ text "Read more" ]
  else
    text ""

getDetails =
  Json.at ["detail"] Json.float


-- Test text Content

smallContent =
  "Hi"

largeContent =
  "The overflow event is fired when an element has been overflowed by its content or has been rendered for the first time in this state (only works for elements styled with overflow != visible)."