字体大小取决于容器的宽度

Question

I'd like to create a block of text that has three lines of text, all different lengths but the same width like shown in this image (apologies for the size). I'd like to know if there is a way of doing so without creating three different elements and changing the font-size for each. Would it be possible to set the font-size to the width of its container?

<div class="block pink">
<div class="block-container">
    <p>Create your</p>
    <p>30x20</p>
    <p>Canvas</p>
</div>
</div>

Answer 1

no. Not with CSS. But there are lots of jquery plugins that will do this for you. Fx. http://simplefocus.com/flowtype/