html - 使用文本溢出 : ellipsis with flexbox

标签 html django twitter-bootstrap css

我正在构建一个购物车页面，想要列出产品的图片、标题、价格和一个表单元素以将其从购物车中删除。

我试过同时使用 white-space: nowrap;、overflow: hidden; 和 text-overflow: ellipsis;我想截断的元素，但我不知道如何正确显示它们，尤其是使用 flexbox 的 img-container 和 name-price-container。

这是我的 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

请注意，第一个和第三个结果正确呈现，但如果文本长于页面适合的文本，表单元素不会被截断，而是换行。

感谢任何帮助。

编辑:这是更新的 jsfiddle根据 Andrei 的评论。

最佳答案

为了获得所需的行为，您需要进行多项更改。首先，您需要了解您正在处理 flexbox 中的负空间场景。那是当内容的长度总和大于可用的父长度时。
在这种情况下，flexbox 计算它们之间的差异并尝试在允许 flex-shrink 的 child 之间平均分配差异。 ，根据每个 child 的flex-shrink因素。

所以你需要设置.name-price-container的 flex-shrink至 1 :

 .name-price-container {
    flex: 1 1 auto;
 }

没有它，省略号就不会出现，因为内容(你的 <a> )总是会根据需要增长，从而设置 width ，因此 flex-basis , 属于 .name-price-container (目前无法缩小)。因此，没有省略号。

您的第二个问题是关于 <a> 的事实元素，默认情况下有一个 display的 inline .为了使省略号起作用，您需要一种方法来限制它的宽度。最简单的是给它 display:block (因为现在 parent 缩小了)。另一种方法是将省略号效果移动到 span并给出跨度 width: 100% .

最后，你要防止.btn-container缩小并删除其 overflow .给flex-shrink: 0并删除 overflow: hidden从中。

顺便说一下，body * { overflow: hidden; }是真的您想避免的东西，因为它会覆盖 overflow 的默认值对于页面中的每个元素。如果你改变它，有很多元素将不再按预期工作。下拉菜单、工具提示、弹出窗口和模式等等。

这是您的工作示例:

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
* {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}
body {
  background-color: #e6ebf0;
}
ul {
  padding-left: 0;
}
ul li {
  list-style: none;
}
ul li img {
  width: 100%;
}
.img-container {
  background-color: #343a40;
  border: 1px solid #343a40;
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
  justify-content: center;
  align-items: center;
}
form {
  display: inline;
}
.btn-light {
  background-color: white;
  border: 1px solid #ced4da;
}
.row {
  margin: 0;
}
.product {
  display: flex;
}
.product,
.total {
  margin-top: 0.5rem;
  padding: 1rem;
  background-color: white;
  border: 1px solid #ced4da;
  border-radius: 4px;
}
.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 1 auto;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.name-price-container a {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.name-price-container a,
.name-price-container a:hover {
  color: #212529;
}
.btn-container {
  height: 130px;
  line-height: 130px;
  min-width: 0;
  white-space: nowrap;
}
.btn-container .btn {
  margin: 0;
  display: inline-block;
}
@media all and (max-width: 768px) {
  .product .img-container {
    height: 64px;
    width: 64px;
  }
  .product .img-container img {
    max-width: 64px;
    max-height: 64px;
  }
  .btn-container {
    height: 66px;
    line-height: 66px;
    flex-shrink: 0;
  }
}
<div class="container">
    <ul>
        
        <li class="row product">
            <div class="img-container">
                <a href="/gallery/product?id=21">
                    <img src="https://i.imgur.com/CyYN9a7.jpg" alt="Vials">
                </a>
            </div>
            <div class="name-price-container">
                <span>
                    <a href="/gallery/product?id=21">Vials Loooooooooong Text</a>
                </span>
                <span>$30.00</span>
            </div>
            <div class="btn-container">
                <form method="POST" action="/gallery/remove_cart">
                    <input type="hidden" name="csrfmiddlewaretoken" value="...">
                    <input type="hidden" name="id" value="21">
                    <input type="submit" class="btn btn-light" value="Remove">
                </form>
            </div>
        </li>
        
        <li class="row product">
            <div class="img-container">
                <a href="/gallery/product?id=22">
                    <img src="https://i.imgur.com/PoCaEjw.jpg" alt="Driftbird">
                </a>
            </div>
            <div class="name-price-container">
                <span>
                    <a href="/gallery/product?id=22">Driftbird Loooooooooong Text</a>
                </span>
                <span>$25.00</span>
            </div>
            <div class="btn-container">
                <form method="POST" action="/gallery/remove_cart">
                    <input type="hidden" name="csrfmiddlewaretoken" value="...">
                    <input type="hidden" name="id" value="22">
                    <input type="submit" class="btn btn-light" value="Remove">
                </form>
            </div>
        </li>
        
        <li class="row product">
            <div class="img-container">
                <a href="/gallery/product?id=19">
                    <img src="https://i.imgur.com/KxAyAyE.jpg" alt="Dragon">
                </a>
            </div>
            <div class="name-price-container">
                <span>
                    <a href="/gallery/product?id=19">Dragon Loooooooooong Text</a>
                </span>
                <span>$300.00</span>
            </div>
            <div class="btn-container">
                <form method="POST" action="/gallery/remove_cart">
                    <input type="hidden" name="csrfmiddlewaretoken" value="...">
                    <input type="hidden" name="id" value="19">
                    <input type="submit" class="btn btn-light" value="Remove">
                </form>
            </div>
        </li>
        
    </ul>
</div>

已更新 fiddle here

关于html - 使用文本溢出 : ellipsis with flexbox，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54374913/

上一篇：javascript - 如何修复可点击的 href 标签？

下一篇：javascript - CSS，剪辑内圈到图像

相关文章：

html - 如何使 GitHub 中的 Gallery CSS slider 响应

collectstatic 时 Django gettext 错误

python - Django:如何缓存一个函数

javascript - 使用 Twitter Bootstrap 和 Jquery 的 Div 行填充问题

html - 在表单中居中输入字段

html - CSS 自动调整网格元素大小

javascript - 使用模式表单 ajax 的 HTMLFormElement.toString 超出了最大调用堆栈大小

css - 为什么伪元素周围有额外的空间？

javascript - 使用 Scrollmagic 补间文本框的不透明度

python - Django 过滤器 - 按相关模型中字段的平均值过滤

©2024 IT工具网  联系我们