Html 覆盖div中的文本格式

我正在尝试在图像上创建悬停覆盖。我从你那里得到了密码

我对课文有意见，我试着在下面加上一个小标题和一句话的描述。我似乎无法使它合适，因为一个新行将上面的文本进一步向上推，而将其保留在一个段落标记上会使其溢出

我正在使用wordpress、自定义css插件和所见即所得编辑器

.container{
浮动：左；
位置：相对位置；
宽度：25%；
}
.形象{
显示：块；
宽度：100%；
高度：自动；
}
.覆盖{
位置：绝对位置；
底部：100%；
左：0；
右：0；
背景色：#edede7；
溢出：隐藏；
宽度：100%；
身高：0；
过渡：放松；
}
.container:悬停。覆盖{
底部：0；
身高：100%；
}
.文本{
空白：预处理；
颜色：#000000；
字体大小：20px；
位置：绝对位置；
溢出：自动；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
}

鼓舞人心的室内外家具产品

看看这个：

我已经删除了

空白：pre

这阻碍了文本换行，我还删除了您或多或少放置在各处的

溢出

属性，然后我使用不带白色画布的图像更改了图像，并更改了一些高度和宽度以适合容器

.container{
浮动：左；
位置：相对位置；
宽度：25%；
溢出：隐藏；
}
p{margin:0}
.形象{
显示：块；
宽度：100%；
高度：自动；
}
.覆盖{
位置：绝对位置；
底部：100%；
左：0；
右：0；
背景色：#edede7；
宽度：100%；
过渡：放松；
}
.container:悬停。覆盖{
底部：0；
身高：100%；
}
.文本{
颜色：#000000；
字体大小：20px；
文本对齐：居中；
浮动：左；
文本对齐：对齐；
填充：0 10px；
利润率最高：50%；
转化：translateY（-50%）；
}

鼓舞人心的室内外家具产品

你是说这个

.container{
浮动：左；
位置：相对位置；
宽度：25%；
}
.形象{
显示：块；
宽度：100%；
高度：自动；
}
.覆盖{
位置：绝对位置；
底部：100%；
左：0；
右：0；
背景色：#edede7；
溢出：隐藏；
宽度：100%；
身高：0；
过渡：放松；
}
.container:悬停。覆盖{
底部：0；
身高：100%；
}
.文本{
颜色：#000000；
位置：绝对位置；
字体大小：小；
文本对齐：对齐；
填充：0 10px；
最高：50%；
左：0；
右：0；
转化：translateY（-50%）；
}

鼓舞人心的室内外家具产品
鼓舞人心的室内外家具产品
鼓舞人心的室内外家具产品

您需要删除

和

标记并删除此行：

   white-space: pre;

并将其替换为：

   font-size: 20px;

为此：

   font-size: small;

这就是修复它所需要的全部，但我也冒昧地简化了您的代码

.container{
浮动：左；
位置：相对位置；
宽度：25%；
}
.形象{
显示：块；
宽度：100%；
高度：自动；
}
.覆盖{
位置：绝对位置；
底部：100%；
左：0；
右：0；
背景色：#edede7；
宽度：100%；
身高：0；
过渡：放松；
溢出：隐藏；
}
.container:悬停。覆盖{
底部：0；
身高：100%；
溢出：可见；
}
.文本{
位置：绝对位置；
字体大小：小；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

鼓舞人心的室内外家具产品

您的图像周围有一块白色画布。。。请使用完美的图像请更准确地描述您想要实现的目标。事实上，我不确定。例如，你说你想要“一个小标题和一个句子描述”，但你的代码只有一个长句。我的答案是什么？不，这不能解决问题。现在它可以工作了。然而，正如我已经对马吉德说的，请对你所做的改变做更多的描述。一段代码可能会对OP有所帮助，但对其他人没有那么大帮助。同样值得注意的是，当你调整窗口大小时，它的效果并不好。嗯，代码做得很好，但请对你所做的更改进行更多描述。一段代码可能对OP有帮助，但对其他人没有帮助。