How to fix text overflowing from DIV

2 Views

I’ve got 2 custom widgets, with HTML in each of them. When I’m viewing the site in desktop mode they’re displayed fine, but on smaller resolutions (when the widgets are displayed below main content) the text overflows out of the parent div.

You can see this here in the sidebar

Read More

enter image description here

Up to now, I have:

HTML: 

<div id="cstmwdgt_background_image">
<img src="http://vetromar.com/beta/wp-content/uploads/2013/12/inspection_trip.png" />
<div id="cstmwdgt_text_overlay">
<p class="cstmwdgt_text_style_pink">Realiza tu Viaje de Inspección</p>
<br />
<a class="cstmwdgt_btn_pink" href="#">Click Here</a>
</div>
</div>

CSS: 

/* CUSTOM WIDGET */
/*BG & Float text*/
#cstmwdgt_background_image {
width:100%;
position: relative;
overflow: visible;
white-space:normal
}
#cstmwdgt_text_overlay {
margin-left: 1px;
margin-top: 1px;
padding-right: 5px;
position: absolute;
top: 2px;
left: 10px;
text-align:left;
max-width: 280px !important;
display:block;
}
/*Text Style - Pink*/
.cstmwdgt_text_style_pink {
color: #e82c90;
font-weight:bold;
font-size: 16px;
font-family: Arial;
}
/*Btn Style - Pink*/
.cstmwdgt_btn_pink {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #fff !important;
padding: 5px 10px;
background: #e82c90;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 3px solid #d42d89;
-moz-box-shadow:
    0px 1px 1px rgba(000,000,000,1),
    inset 0px 0px 0px rgba(255,255,255,0);
-webkit-box-shadow:
    0px 1px 1px rgba(000,000,000,1),
    inset 0px 0px 0px rgba(255,255,255,0);
box-shadow:
    0px 1px 1px rgba(000,000,000,1),
    inset 0px 0px 0px rgba(255,255,255,0);
text-shadow:
    0px -1px 0px rgba(000,000,000,0.2),
    0px 1px 0px rgba(255,255,255,0.3);
}
.cstmwdgt_btn_pink:hover{ border: 3px solid #8a1e5a; color: #fff !important;}

Here’s a jsfiddle http://jsfiddle.net/breadadams/XaSv8/

I’ve also tried with word-wrap: breakword but no luck.

Just to be clear, there are 2 images (a green one and a pink one) – I’m going to be applying the same things to both of them

Post Views: 2

Related posts

Leave a Reply

3 comments

  1. If you add display: inline-block to your #cstmwdgt_background_image, it will cause the div to collapse around the content and, in turn, force word-wrap for your text.

  2. Remove the 5px padding from the inner text-overlay div, and add it to the outermost stmwdgt_background_image div instead.

    Also set the max-width property to the outer widget, not on the text overlay. Set the text overlay to 100%. 

    #cstmwdgt_background_image {
    width:100%;
    position: relative;
    overflow: visible;
    white-space:normal;
    padding-right:5px;
    max-width: 280px !important;
}
#cstmwdgt_text_overlay {
    margin-left: 1px;
    margin-top: 1px;
    position: absolute;
    top: 2px;
    left: 10px;
    text-align:left;
    width:100%;
    display:block;
}

    You could always add a min-width property to the widget to prevent it from getting that small.

  3. Ideally, you want to have the image to be placed as a background with CSS and not as an tag with a as an overlay, but since it seems that you are using WordPress, I’m not sure how complicated it would be for you to do that.

    In any case, what you want to do (in a purely CSS solution) would be the following:

    1. Change the Max-width of #cstmwdgt_text_overlay. I changed it t0 220px and that seem to give the text enough padding on the right to simulate the padding on the left and move all overflowing text to the next line.

    2. Since your button is relative to the size of the text, you will want to give this element an absolute position.

    3. Since you’re giving a button a fixed position, you will want to take out (or at least control) any padding from the

      that the user agent is placing.

    4. If you’re not familiar with absolute positioning, you want the element to be positioned absolute relative to the parent element.

    The following code is what I added to your jsFiddle:

    p.cstmwdgt_text_style_pink {
    margin-bottom: 0;
    padding-bottom: 0;
}

a.cstmwdgt_btn_pink {
    position: absolute;
    top: 70px;
    left: 5px;
}

#cstmwdgt_background_image {
    position: relative;
}

    Here is the modified jsFiddle: http://jsfiddle.net/breadadams/XaSv8/