Html 如何修复从DIV溢出的文本

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

您可以在侧边栏中看到这一点

到目前为止，我有：

HTML:

这是一个JSFIDLE

我也尝试过使用

wordwrap:breakword

，但运气不好

---

为了清楚起见，有两个图像（一个绿色的和一个粉色的）-我将对它们两个应用相同的内容

从内部文本覆盖div中删除5px填充，并将其添加到最外层的stmwdgt_background_image div

还将“最大宽度”属性设置为外部小部件，而不是文本覆盖。将文本覆盖设置为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;
}

---

您可以始终向小部件添加min width属性，以防止其变小。

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

还将“最大宽度”属性设置为外部小部件，而不是文本覆盖。将文本覆盖设置为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;
}

---

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

如果将display:inline块添加到#cstmwdgt_background_图像，它将导致div围绕内容折叠，进而强制文本换行。

如果将display:inline块添加到#cstmwdgt_background_图像，这将导致div围绕内容折叠，进而强制文本换行。

理想情况下，您希望将图像作为CSS背景放置，而不是作为带有覆盖的标记放置，但由于您似乎正在使用Wordpress，我不确定这样做会有多复杂

在任何情况下，您希望（在纯CSS解决方案中）执行以下操作：

更改#cstmwdgt_文本_覆盖的最大宽度。我把它改为220px，这似乎给了文本足够的右边填充来模拟左边的填充，并将所有溢出的文本移到下一行

由于您的按钮与文本的大小有关，因此您需要为该元素指定一个绝对位置

因为你给一个按钮一个固定的位置，你需要从用户代理放置的中取出（或者至少控制）任何填充

如果不熟悉绝对定位，则希望元素相对于父元素绝对定位

以下代码是我添加到JSFIDLE中的代码：

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

---

下面是修改后的JSFIDLE:

理想情况下，您希望将图像作为CSS背景放置，而不是作为带有覆盖的标记放置，但由于您似乎正在使用Wordpress，我不确定这样做会有多复杂

在任何情况下，您希望（在纯CSS解决方案中）执行以下操作：

更改#cstmwdgt_文本_覆盖的最大宽度。我把它改为220px，这似乎给了文本足够的右边填充来模拟左边的填充，并将所有溢出的文本移到下一行

由于您的按钮与文本的大小有关，因此您需要为该元素指定一个绝对位置

因为你给一个按钮一个固定的位置，你需要从用户代理放置的中取出（或者至少控制）任何填充

如果不熟悉绝对定位，则希望元素相对于父元素绝对定位

以下代码是我添加到JSFIDLE中的代码：

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

---

这是修改后的JSFIDLE:

尝试了这些，但没有起作用，我认为侧边栏的div宽度保持在侧边栏的两行上，然后当它变为responsive width时，背景div的宽度是全屏的，所以文本变为两行。#cstmwdgt_background_图像的宽度属性不起作用吗？这里有一个更新的JSFIDLE：尝试了这些，但不起作用，我认为侧边栏的div宽度保持在侧边栏的2行上，然后当它变为responsive width时，背景div宽度是全屏的，所以文本变为2行。#cstmwdgt_background_图像的宽度属性不起作用吗？这里有一个更新的JSFIDLE：这似乎也不行，我已经将JSFIDLE更新到了我目前使用的东西：试着去掉“宽度：100%”并添加“显示：内联块”。谢谢Mayer先生，这没有问题。很高兴我能帮忙！这似乎也不行，我已经将JSFIDLE更新到了我目前使用的版本：尝试去掉“宽度：100%”并添加“显示：内联块”。谢谢Mayer先生，这样做没有问题。很高兴我能帮忙！谢谢，我在按钮上使用了

a.cstmwdgt_btn_粉色

css。谢谢，我在按钮上使用了

a.cstmwdgt_btn_粉色

css。