如何修复此DIV尺寸问题？

So in my web app each user-submitted listing has a preview DIV which contains four attributes associated with the submission -- the photo, the title, the price, and the category. Each of these preview DIVs needs to be the same width and height. The images are resized to a fixed width and height to fit within the div. However, when the title is too long it breaks to the next line making the DIV larger in height than the other preview DIVs. Here's an image:

因此,在我的网络应用程序中,每个用户提交的列表都有一个预览DIV,其中包含与提交相关的四个属性 - 照片,标题,价格和类别。这些预览DIV中的每一个都需要具有相同的宽度和高度。将图像调整为固定宽度和高度以适合div。但是,当标题太长时,它会突破到下一行,使DIV的高度比其他预览DIV更大。这是一张图片:

The bottom half should look more like this:

下半部分看起来应该更像这样:

I'm thinking that since both the title and category are on the left they should be in their own container div, with the price floated by itself to the right. Titles can be a maximum of 40 characters in length so basically I need to figure out the best way to accommodate for a variable amount of text, and maybe replace text which breaks to the next line with an ellipsis. How would I do this? Any recommendations?

我认为既然标题和类别都在左边,它们应该在他们自己的容器div中,价格自己浮动到右边。标题的长度最多为40个字符,所以基本上我需要找出适应可变数量文本的最佳方法,并且可能用省略号替换中断到下一行的文本。我该怎么办?有什么建议?

1 个解决方案

#1

try using the following code that will add ellipsis (...) whenever the title is larger than it should:

尝试使用以下代码,只要标题大于它应该添加省略号(...):

.elem {
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}