如何修复从DIV溢出的文本

Question

我有两个自定义小部件，每个小部件都有HTML。当我在桌面模式下查看网站时，它们显示正常，但在较小的分辨率上（当小部件显示在主要内容下方时）文本溢出父div。

您可以在侧栏中看到此here

到目前为止，我有：

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;}

这是一个jsfiddle http://jsfiddle.net/breadadams/XaSv8/

我也试过word-wrap: breakword，但没有运气。

为了清楚起见，有2张图片（绿色和粉红色） - 我将对他们两个应用相同的东西

Answer 1

从内部文本叠加div中删除5px填充，然后将其添加到最外层的stmwdgt_background_image div中。

还将max-width属性设置为外部窗口小部件，而不是文本叠加层。将文本叠加设置为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;
}

您始终可以向窗口小部件添加最小宽度属性，以防止它变小。

Answer 2

如果你将display：inline-block添加到你的#cstmwdgt_background_image中，它会导致div围绕内容折叠，反过来强制你的文字自动换行。

Answer 3

理想情况下，您希望将图像放置为带有CSS的背景，而不是带有叠加层的标记，但由于您似乎使用的是Wordpress，我不确定它会有多复杂为了你这样做。

在任何情况下，您想要做的事情（在纯粹的CSS解决方案中）将是以下内容：

1. 更改#cstmwdgt_text_overlay的最大宽度。我把它改为t0 220px，这似乎给文本足够的填充在右边模拟左边的填充，并将所有溢出的文本移动到下一行。

2. 由于您的按钮是相对于文本的大小，因此您需要为此元素提供绝对位置。

3. 由于您为按钮指定了固定位置，因此您需要从用户代理放置的

   中取出（或至少控制）任何填充。

4. 如果您不熟悉绝对定位，则希望元素相对于父元素位于绝对位置。

以下代码是我添加到你的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;
}

以下是经过修改的jsFiddle：http://jsfiddle.net/breadadams/XaSv8/