In my design, I have a purple block that contains text of varying lengths. The block is responsive and its width is set in percentage.
Some users using Chrome (v43.0.2357.65) on Windows XP are experiencing issues where the text overflows beyond the edge of the purple box unexpectedly. It's difficult to replicate this consistently. I'm attempting to resolve the overflow issue by adding max-width and word-wrap properties to the text container div.
The website is in Dutch.
<div class="mt-landing__section-notification">
<div class="mt-landing__section-notification__info-icon icon-info"></div>
<div class="mt-landing__section-notification__close-icon"></div>
<div class="mt-landing__section-notification__content">
<div class="mt-landing__section-notification__message">
This is where the text is.
</div>
</div>
</div>
Here is the CSS code for the outermost div and the text-containing div:
.mt-landing__section-notification {
z-index: 1;
width: 64.5%;
background-color: #411E4E;
padding: 20px;
color: #fff;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 0px;
display: block;
}
.mt-landing__section-notification__message {
line-height: 24px;
margin-top: -3px;
word-wrap: break-word;
max-width: 100%;
}
.mt-landing__section-notification__content {
margin: 0px 50px;
}
.mt-landing__section-notification__info-icon {
width: 50px;
float: left;
font-size: 24px;
}
.info-icon {
font-family: mt-icons;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
}
.info-icon::before {
content: '\e617';
}
Does anyone have insights into why the text is overflowing?