Html 覆盖中的文字换行

我有以下问题，我真的不知道如何将

覆盖

文本按我的意愿进行文字包装。我希望文本在叠加的底部（或底部上方的几个像素）截断，并以三个点结束，因此类似这样：

eu dolor sed，euismod…

$（'.container'）.mouseenter（函数（）{
//警报（$（this）.find（'.soverlay'）.innerHeight（））；//返回56.8 px
var hgt='calc（100%-'+parseInt（$（this）.find（'.soverlay'）.innerHeight（）+5）+'px'）；
$（this.find（'.overlay'）.css（{'height'：hgt}）；
});
$（'.container'）.mouseleave（函数（）{
//警报（$（'.container.soverlay'）.innerHeight（）；//返回56.8 px
$（this.find（'.overlay'）.css（{'height'：'0px'}）；
});
.container{
位置：相对位置；
宽度：50%；
最大宽度：250px；
}
.形象{
边界半径：10px；
显示：内联块；
宽度：100%；
高度：自动；
框大小：边框框；
}
soverlay先生{
边界半径：10px 10px 0px 0px；
框大小：边框框；
位置：绝对位置；
排名：0；
背景：rgb（0,0,0）；
背景：rgba（0,0,0,0.5）；/*黑色透明*/
颜色：#f1f1；
宽度：100%；
过渡：放松；
颜色：白色；
字体大小：16px；
填充：10px；
文本对齐：居中；
溢出：隐藏；/*悬停时删除；添加悬停时删除*/
空白：nowrap；/*悬停时删除；添加悬停时删除*/
文本溢出：省略号；
}
.覆盖{
边界半径：0px 0px 10px 10px；
位置：绝对位置；
底部：4px；
左：0；
右：0；
背景色：#008CBA；
溢出：隐藏；
宽度：100%；
身高：0；
过渡：放松；
背景：rgb（0,0,0）；
背景：rgba（0,0,0,0.5）；/*黑色透明*/
字体大小：12px；
颜色：白色；
}
.container:悬停。覆盖{
/*高度：计算（100%-57px）；/*根据“soverlay”高度更改高度*/
边框顶部：3件纯色黄色；
}
.集装箱：悬停.现代{
溢出：未设置；
空白：未设置；
}

图像叠加标题
将鼠标悬停在图像上以查看效果

有些人的名字很长
这是一份很长的工作描述，不适合这个部门。现在的问题是，我如何在叠加的底部剪切文本

Lorem ipsum dolor sit amet，是一位杰出的领导者。这是一种很好的治疗方法。两个威尼斯人，一个伟大的领袖，一个伟大的领袖，欧盟的领袖。这是一个巨大的直径，也就是最大的厄洛斯·特里斯蒂克和多涅克·萨吉蒂·马蒂斯·维利特。苏西比特的莫比孕妇tincidunt metus。这是一种新的植物。Morbi hendrerit我是orci非vulputate。两个都是turpis，一个是dolor sed，一个是euismod mollis velit。这是一种特殊的调味品，调味品是一种特殊的调味品，是一种特殊的调味品。埃蒂亚姆·波苏尔。

您应该向.soverlay Div添加固定宽度

然后使用以下CSS属性

word-wrap: break-word;

我想你没有完全理解这个问题，在
.soverlay
中没有问题。我想在
.overlay
中剪切/包装文本。
word-wrap: break-word;