Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How do I make dynamic text to break at a certain point?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #254081
    Ret
    Participant

    I want to break the text to fit in a maximum area but the area is dynamic and so is the amount of text. I’m having rough time putting it in words so I think this image will help

    enter image description here

    The image shows how I want it to be but since the div’s size and the text’s length are both dynamic; on some resolutions the text breaks down and pushes the button off the div.
    Is there any way I can make the text break right on the last line before it gets to the button?

    .div {
      position: relative;
      width: 100%;
      height: 44vh;
      display: inline-block;
    }
    
    .text {
      font-size: 100%;
      text-align: left;
      margin-top: 5px;
      margin-left: 15px;
      margin-bottom: 0px;
      word-wrap: break-word;
    }
    
    
    #Button {
      font-size: 1vw;
      text-align: center;
      display: inline-block;
      background-color: green;
      padding: 15px;
      margin-top: 15px;
      cursor: pointer;
    }
    

    jsfiddle here

    #254085
    Atelierbram
    Participant

    the area is dynamic and so is the amount of text.

    JavaScript is needed to calculate the specific height (or maybe length) of the text in relation to the height of the container.

    With CSS – using calc setting a max-height, and overflow: hidden on .text – will only get you so far.

    https://codepen.io/atelierbram/pen/PmzRgL

    #254097
    Ret
    Participant

    But how would I calculate it live with the window resizing? just repeat the function every X ms ?

    #254102
    Atelierbram
    Participant

    Window resizing in javaScript with setting EventListeners using onresize event and maybe window.matchMedia. But I don’t know exactly what it is that you after, so maybe if you adept the demo, try things with javaScript, and/or give some further explanations that could make things more clear. Also to get help from javaScript experts over here, of which I am not one.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.