CODEWITHSUNDEEP
htmlcssword-wrap
gskema
gskema

Reputation: 3211

How to adjust word-wrapped text's width when it exceed containers max-width ? (HTML)

Im trying to put some text info on thumbnails, the info box is floating to the left and should not exceed max-width:85%; (of the thumbnail). Thumbnail area is marked light gray in the picture, text info area is yellow.

When the text exceed the with, text holding element ocupies full 85% and word wraps to next line. My problem is that there are extra white spaces on the first line, which I would like gone.

In my project yellow area holds Thumbnail title, even though there are few words in it, sometimes it just leaves big gaps on the first line which look bad.

Is there any way to fix this or am I asking for too much ?

jsFiddle demo

enter image description here

HTML

<div id="main">
<div id="text">
    <h3>Some text and line breaking words. Some text and line breaking words.
      Soaaaaame text and line breaking words.<h3>
</div>

CSS

#main {
width:100%;
background-color:#ccc;
}

#text {
display:inline-block;
max-width:85%;
background-color:yellow;
}

EDIT: text-align:justify only does the job when there are enough words. Take a look at this:

WITH JUSTIFY

enter image description here

WITHOUT

enter image description here

Upvotes: 0

Views: 1651

Answers (1)

Sean Ryan
Sean Ryan

Reputation: 6056

I would have to say you are asking too much. If a particular bit of text is too long for the space provided, it is going to wrap to the next line. There are a couple of options, but probably nothing you are going to like.

  1. Reverse the order. Thumbnail on left, text on right. The gap will still exist, but will move to right, where it won't be as noticeable.

    Example: http://jsfiddle.net/fvdJm/4/

  2. Right align the text. Usually not preferred as it can make text difficult to read, but if you are only looking at a couple of lines of text at max, it won't be that bad. Again, you will still have the gap, but now it will be on the left, away from the point of focus. text-align:right; will do the trick.

    Example: http://jsfiddle.net/fvdJm/3/

At the end of the day, you can make all the adjustments you want (text size, alignment, layout), but there will still be times you will end up with this issue. That is the just the nature of content. The best thing to do is just realize it is out of your control, and move on.

Upvotes: 1

Related Questions