CODEWITHSUNDEEP
htmlcssinternet-explorer-8overflowword-wrap
user1406440
user1406440

Reputation: 1645

Text doesn't wrap in table layout, overflows

I have a layout that uses display: flexbox; to centre content, amongst other things. As IE9 and below do not support this I've used a display: table; method instead with almost works a treat.

The problem I'm having is in IE8 (Yes I know, but I have to). For some reason the text escapes it's container, which has display: table-call; set on it. I've never experienced this before using this method and was hoping someone can help. Here is a screenshot of what occurs. with the img and figcaption coloured so you can see there width easier:

Text breaking out of table layout As you can see, the text breaks out of the figcaption.

Here is the mark-up for the code:

<figure>
    <figcaption>
        <h3>E-commerce + Retail</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </figcaption>
    <img src="img/content/ipad.png" alt="ALT TEXT." class="ipad" />
</figure>

And also the CSS:

figure {
    display: table;
    width: 100%;
}

figcaption,
.ipad {
    display: table-cell;
    vertical-align: middle;
}

.ipad {
    width: 48.4375%;
    max-width: 620px;
}

figcaption {
    padding: 0 8% 0 2%;
    width: 51.5625%;
}

The original figcaption width was '41.5625%;', taking into account the padding. But I think table-cell's take this into account themselves, so I've set the width as the actual width. Seems to work in everything else, bar IE8!

Thanks, really hope someone can shed some light on this annoying little glitch!

Upvotes: 0

Views: 320

Answers (1)

gsp
gsp

Reputation: 21

at <figcaption> use word-wrap: break-word;

That should do what you want.

FYI though, there are other ways that you can contain the text within it's parent element other than the one specified.

Upvotes: 1

Related Questions