Html 占用一定屏幕空间后是否会溢出文本？

我试图让文字溢出下来，一旦它已经占据了80%的DIV。我希望点之间的项目名称和价格的空间。但是，当项目名称太长时，它会删除单词。我想把这些词包装起来，或者顺流而下。我似乎不知道该怎么做

下面是一个问题的例子：查看第3项以及如何将其切断

.item{
宽度：100%；
显示器：flex；
证明内容：之间的空间；
}
.描述{
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
}
.描述：之后{
文本溢出：省略号；
内容：“
}
#名字{
颜色：红色；
}

汉堡
$9.99 
热狗
$4.99 
长得多的项名称会占用太多空间并超出div
$4.99 

可能的解决方案是使用一个不断增长的中心flex容器，并允许默认情况下包装h4标签

这需要对特定用途进行一些额外的修改，但总的来说，该理论可能有效

.item{
宽度：100%；
显示器：flex；
证明内容：之间的空间；
}
.描述{
溢出：隐藏；
}
span.dots{flex grow:1；最小宽度：10%；高度：35px；左边距：5px；右边距：5px；边框底部：2px点#aaa；}
#名字{
颜色：红色；
}

汉堡
$9.99 
热狗
$4.99 
长得多的项名称会占用太多空间并超出div
$4.99 

可能的解决方案是使用一个不断增长的中心flex容器，并允许默认情况下包装h4标签

这需要对特定用途进行一些额外的修改，但总的来说，该理论可能有效

.item{
宽度：100%；
显示器：flex；
证明内容：之间的空间；
}
.描述{
溢出：隐藏；
}
span.dots{flex grow:1；最小宽度：10%；高度：35px；左边距：5px；右边距：5px；边框底部：2px点#aaa；}
#名字{
颜色：红色；
}

汉堡
$9.99 
热狗
$4.99 
长得多的项名称会占用太多空间并超出div
$4.99 

我建议将您的名称id更改为类，因为有多个类。 如果jQuery版本是可以接受的，那么这里有一个问题： 在此版本中，

.name

类的宽度相对于其父类进行检查，然后将

.description

类替换为新的

.wrapped

类。记者：之后

---

有一个额外的jquery来重新定位价格，但是这个版本中缺少点

我建议将您的名称id更改为类，因为有多个类。 如果jQuery版本是可以接受的，那么这里有一个问题： 在此版本中，

.name

类的宽度相对于其父类进行检查，然后将

.description

类替换为新的

.wrapped

类。记者：之后

---

有一个额外的jquery来重新定位价格，但是这个版本中缺少了点

JavaScript和jquery与此有什么关系？不确定是否可以使用这两种方法解决。可能？？？-->不错@Scott！非常接近。有点笨重。这是我所追求的模式。是的，不完全是这样“优雅”但似乎能完成任务。这个链接是你的还是我碰巧想出了一个非常类似的解决方案？JavaScript和jQuery与此有什么关系？不确定是否可以用这两种方法解决。也许？？？-->不错@Scott！非常接近。有点笨重。这是我所追求的模式。是的，不完全是这样“优雅”但似乎能完成任务。这个链接是你的还是我碰巧想出了一个非常类似的解决方案？非常酷的斯科特。我一直在尝试让第三个选项上的点连接起来。有什么想法吗？上面有什么想法吗？等一下，我去掉右边的空白：5px；它成功了：）哦，是的。。我加了边距，给了点喘息的空间。。。但它很容易被移除：）非常酷的斯科特。我一直在尝试让第三个选项上的点连接起来。有什么想法吗？上面有什么想法吗？等一下，我去掉右边的空白：5px；它成功了：）哦，是的。。我加了边距，给了点喘息的空间。。。但它很容易被移除：）