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

Home Forums CSS How to make Responsive Text

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #235198

    I have an example

    Squeeze the Result horizontally and you will see…

    1. The days are responsive.
    2. Totally ignore the green line please as that will be taken care of by server side coding.

    The challenge is to make the text “Tom Jones – $4,000” responsive also.

    Can this be done via CSS and maybe JS as well?


    By ‘responsive text’ I am not referring to resizing text.

    When the container is narrowed the text spills outside the first line of days. I want it to follow onto the second line of days.

    I strongly suspect it cannot be done by CSS alone but needs some clever JS.


    I suppose that your example is the table correct?

    If yes, then you should place IDs or classes to td elements.

    Then inside your css file, you use the @media to set your desired responsiveness.

    Now, normally (for example for @media min-width: around 700 px you should be ok. For @media max-width: around 420px which is the mobile version you set in td class of the table width: 100%;

    1st step: inside your css you place wraps like this:

    @media screen and (min-width: XXXpx) { }

    where XXX the desired width you want your appearance to change. Inside the brackets you place your CSS coding like this:{width:100%;}

    If you do this in normal CSS, then you see the result. So, you just need to tell CSS to show this result at specific screen width.

    So, in you css file you may use something like this:

    @media screen and (max-width:420px) {{width:100%; }

    Add inside those brackets whichever element you want to fill the screen by adding width:100%;

    Sometimes, you need to use this: 100%!important; to override some other CSS


    Thank you pm4698 for responding. However I am not sure where you are seeing table/s in my jsfiddle as there is none. Or do I misunderstand you?

    As per my jsfiddle, as the container is narrowed, one day at a time goes to the second row.

    I need my text to follow.


    Sorry, it looked like table but its divs.

    Although my proposed code works. Please check


    Sorry again but your code is not what i am after. Please have a look at SO post

    As it has a good image to show the result I am after.


    As far as I got with it…


    Thanks Dhikkediel.

    I have not had a chance to have a good look at it.


    To summarise, word-break: break-allseems to be the best approach. Using absolute positioning and line-height here to get the text in the correct place. Wrapping of the overflow I’ve left to calc() but that’s only approximate, to do this in a more accurate way would require JS I believe.

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