【发布时间】：2019-06-19 20:34:24
【问题描述】：
我正在构建一个购物车页面，并希望列出产品的图片、标题、价格和一个表单元素以将其从购物车中删除。
我尝试在我想要截断的元素上同时使用white-space: nowrap;、overflow: hidden; 和text-overflow: ellipsis;，但我不知道如何正确显示它们，尤其是使用img-container 和@987654329 @ 使用弹性框。
这是我的 Django 模板：
<ul>
{% for product in products %}
<li class="row product">
<div class="img-container">
<a href="{% url 'gallery:product_page' %}?id={{ product.id }}">
<img src="{{ product.image.url }}" alt="{{ product.name }}">
</a>
</div>
<div class="name-price-container">
<span>
<a href="{% url 'gallery:product_page' %}?id={{ product.id }}">{{ product.name }} Loooooooooong Text</a>
</span>
<span>${{ product.price_per_unit }}</span>
</div>
<div class="btn-container">
<form method="POST" action="{% url 'gallery:remove_cart' %}">
{% csrf_token %}
<input type="hidden" name="id" value="{{ product.id }}">
<input type="submit" class="btn btn-light" value="Remove">
</form>
</div>
</li>
{% endfor %}
</ul>
...以及相关的 CSS：
.product .img-container {
background-color: #343a40;
border: 1px solid #343a40;
box-sizing: unset;
height: 128px;
width: 128px;
flex: 0 0 auto;
}
.product .img-container img {
display: block;
max-height: 128px;
max-width: 128px;
width: auto;
height: auto;
}
.name-price-container {
margin: 0 1rem;
display: flex;
flex: 1 0 auto;
flex-direction: column;
justify-content: center;
min-width: 0;
}
.name-price-container a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.btn-container {
float: right;
display: flex;
flex-direction: column;
justify-content: center;
}
.btn-container .btn {
margin: 0;
}
@media all and (max-width: 768px) {
body * {
overflow: hidden;
}
.product .img-container {
height: 64px;
width: 64px;
}
.product .img-container img {
max-width: 64px;
max-height: 64px;
}
}
...以及 470px 宽度的渲染： Image here
请注意，第一个和第三个结果正确呈现，但如果文本比页面上的长度长，表单元素不会被截断，而是换行。
感谢任何帮助。
编辑：这是根据 Andrei 的评论更新后的 jsfiddle。
【问题讨论】：
-
“相关 CSS” 表示 this 呈现与您的图像相同的效果。你还没有接近相关。请提供minimal reproducible example。如果您单独提供 HTML 和 CSS，您的问题很容易得到解答，因为它严格来说是一个与样式相关的问题。提示：右键单击并选择“查看页面源代码”以从您的应用程序中复制/粘贴相关的 HTML，并更新您的 CSS 以在您的应用程序中呈现元素。您还可以从 cdn 添加外部资源。
-
检查编辑以获取更新的示例。
标签： html django twitter-bootstrap css