CODEWITHSUNDEEP
htmlcss
Hassan Baig
Hassan Baig

Reputation: 15824

Image responsiveness breaks when employing overflow-wrap property in its caption

In a web app I'm developing, users can upload photos (with captions) and share with one another.

I display each photo like a polaroid, using CSS to create the effect. For instance:

enter image description here

The design is responsive to varied screen-sizes (it's a requirement):

enter image description here

Here's the CSS code:

.canvas{
    background-color:white;
    padding:10px 10px 30px 10px;
    display:inline-block;
    border-radius:6px;
}

.image{
max-width:400px;
width:100%;
border-radius:12px;
}

.caption-canvas{
max-width:400px;
text-align:center;
margin-bottom:-10px;
margin-top:1em;
}

.caption{
font-size:130%;
color:grey;
}

<div class="canvas">
    <img src="umb.png" class="image">
    <div class="caption-canvas">
        <span class="caption">This is an orange umbrella</span>
    </div>
</div>

So far so good.

But problems arise if the caption is a long string without breaks. E.g.:

enter image description here

However not to worry, one can add overflow-wrap: break-word; (to .caption) to take care of this:

enter image description here

But this gives birth to a new problem: The polaroid canvas doesn't scale down with reduction in resolution any more, and overflows its container. I.e.:

enter image description here

I can fix this responsiveness problem if I use word-break: break-all; instead. However I don't want to use that. It doesn't perform well for English text, so it's out:

enter image description here

However, that's precisely the kind of responsiveness I need. Can someone help me find a workaround that incorporates overflow-wrap: break-word; and is fully responsive? Or is that not possible?

Ideally, I don't want to have to change my CSS too much - it's working as expected in most cases, and it doesn't employ CSS3 (which I need to avoid to cater to older devices - another one of my requirements). I'd prefer well-supported CSS properties as per caniuse.com.

Update: Adding width:100% and max-width:400px; to .canvas almost solves the problem, except the polaroid canvas starts overflowing the containing div even though it does get smaller with res. Behold:

enter image description here

That blue strip in the background is the containing div (and it's bigger than that, but cropped in the image).

Upvotes: 1

Views: 185

Answers (3)

The Doctor
The Doctor

Reputation: 693

♦ in your (.canvas) Add this :

-webkit-box-sizing : border-box;
   -moz-box-sizing : border-box;
        box-sizing : border-box;

✘ and from your html its better if you remove this :

<div class="card" style="margin-top:1.3em;background-color:#BDEBFE;text-align:right;">

✔ and replace it with this iD :

<div id="card">

then in your css use : 

#card {
   margin-top:1.3em;
   padding:6px;
   background-color:#BDEBFE;
   text-align:right;
   max-width:400px;
   }

.canvas{     
-webkit-box-sizing : border-box;
   -moz-box-sizing : border-box;
        box-sizing : border-box;

  background-color:white;
  padding:10px 10px 30px 10px;
  display:inline-block;
  border-radius:6px;
  max-width:400px;
  width:100%;
}

Example : Click here

Browsers support for box-sizing

Note : why we used ID in the first container instead of class ?

in your specific settings and because your using 2 containers one inside another and both uses 'class',
somehow it seems to not allow that first container to show the background even when using padding ,thats why we use ID in the First Container instead , and thats why i told you before to use border in your .canvas better and get ride of that card div container . but if u want it with 2 containers then u most use an ID first .

Upvotes: 3

Wordica
Wordica

Reputation: 2597

You can use media query and something like this for small screens:

text-align: justify;
overflow-wrap: break-word;

I do not see Your HTML but overflow-wrap only for .caption shouldn't have impact on image resize if image is in different div ... ok I see it...

just add this two rules not for .canvas but for .caption-canvas or even for .caption-canvas .canvas{ }

Ps. You have two .canvas classes, one for container and one for it child.

Upvotes: 0

Zahnstochermann
Zahnstochermann

Reputation: 101

If I understand correctly, you are looking for a way to show long words without breaking them. At some point there will be no more room, so the only other way to show long words without breaking them is to use a smaller font on smaller screens. What you can do is use hyphens to allow hyphenation. Just add hyphens: auto to your .caption

More info on hyphens: https://css-tricks.com/almanac/properties/h/hyphenate/

About that container overflow: I added word-break: break-word to your .caption class, which made the polaroid scale down but break the long words - better the long words than all words i guess ;) See everything in the codepen.

https://codepen.io/anon/pen/aEvzwM

Upvotes: 0

Related Questions