How to dynamically make text fit squarely into an area

Question

I am designing a website with a similar layout qualities to http://Obvious.com (will transfer to Medium). I have noticed a few great things about their layout and there is one aspect that I do not know how to do.

On the home page, when it comes to the lines of text underneath the headline of each blogpost I see that there is always a fixed area and the text fits neatly square within the text area. ALSO if the headline is longer the text below adjusts accordingly.

How is this done? I have tried a method that counts the number of characters in a string and when headline is longer, the chosen character amount is less by x characters...BUT when doing this, sometimes there is just one word or two that hangs into the next line therefore giving an uneven look. (I don't want uneven looks)

So is there a way to make sure that the text will always fit to the end of the line? And the amount of text will change depending upon the size of the headline WHILE fitting?

Is this a PHP solution? Perhaps CSS? Javascript? (ps those are languages I know I can work with)

Please visit Obvious.com(trans to Medium) for reference.

Answer 1

It's just a css div with a certain width

<div style="width:300px; height:400px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor justo quis urna hendrerit placerat. Ut fringilla rutrum nulla at rutrum. Nullam sagittis accumsan erat et venenatis. Maecenas luctus magna rutrum neque aliquet dictum at quis libero. Mauris at felis dolor. Nam sit amet euismod purus. Etiam tincidunt laoreet dui ut fermentum.</div>

Here's a JsFiddle I made http://jsfiddle.net/RZFYH/

Answer 2

If you look at the source, you'll see that more text than is actually displayed is passed to the browser. What they're doing is returning the first x characters of an article (in the output HTML generated by, say, PHP) and then clipping the container element with CSS. The x value needs to be predetermined with trial-and-error, but nothing fancy is really going on.

See https://developer.mozilla.org/en-US/docs/CSS/clip and https://developer.mozilla.org/en-US/docs/CSS/text-overflow for details on CSS text clipping