CODEWITHSUNDEEP
htmlcsstext
Elliot MacNeille
Elliot MacNeille

Reputation: 91

HTML5/CSS3 how to force text to require a certain width for rendering

I am doing some web development and came across an aesthetic issue. For testing, I shrink the window and see how the CSS responds. As I do this, a text area reduces in width until 0. At low width most of the text renders lower, but the paragraph's leading word, "also", remains alone much higher for a good range of window sizes. (estimate 330-350px)

The problem can be seen here (link removed) when you reduce the width of the window until the side edge is close to the pictures of the goats.

JavaScript solutions are appreciated but not preferred.

I tried putting the text in a span and giving it a min-width attribute, but it doesn't work, even with display : block; as suggested here.

Testing in Firefox.

Upvotes: 0

Views: 73

Answers (1)

sharayu
sharayu

Reputation: 26

If your text is static, you can use   

<div>
Also&nbsp;chickens, turkeys, pigs, a fig, an apple, and a couple of citrus trees on our farm.<br>
<br>
</div>

OR

This is happening as there is a float: left style on the <div> which contains your <img> tag

<div style="float:left; padding-right:10px; max-width:575px; width:60%; min-width:320px; padding-bottom:20px;">
<img ...
...
</div>

It works fine if you remove this style, i.e.:

<div style="padding-right:10px; max-width:575px; width:60%; min-width:320px; padding-bottom:20px;">
<img ...
...
</div>

Upvotes: 1

Related Questions