Using text-overflow: ellipsis with flexbox

Using text-overflow: ellipsis with flexbox

I'm building a shopping cart page and want to list products' image, title, price, and a form element to remove it from the cart.

I'm building a shopping cart page and want to list products' image, title, price, and a form element to remove it from the cart.

I've tried using white-space: nowrap;, overflow: hidden;, and text-overflow: ellipsis; together on elements that I want to truncate, but I can't figure out how to display them correctly, especially with img-container and name-price-container using flexbox.

Here's my Django template:

<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>

...and the relevant 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;
  }
}

...and the rendering at 470px width: Image here

Notice that the first and third results render correctly, but if the text is longer than what fits on the page, instead of being truncated, the form element breaks to a new line.

Any help is appreciated.

html css css3 django

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Colorful Drop-Down Menu in HTML CSS | Drop-Down Menu in HTML CSS

Download File: https://drive.google.com/file/d/1PpbVEw_mSvUPfA0WqdgcKWSoc-VnqgqW/view?usp=sharing Want to create a Drop-Down Menu with HTML & CSS? Check out ...

CSS3 Clip-path Transform Effects on Scroll with Video Background | Html CSS Vanilla Javascript

CSS3 Clip-path Transform Effects on Scroll with Video Background | Html CSS Vanilla Javascript

Know Everything About HTML With HTML Experts

HTML Assignment Help Australia @30% OFF from Sample Assignment, with Our Best HTML assignment help experts. Get HTML homework help online at affordable price. 100% Plag free assignment solution.

An Introduction to HTML & CSS

At the heart of any general website or web page are lines of code in HTML and CSS. HTML, the web development language to render content and CSS, which styles the content.

How to write text on image in HTML CSS | Text on image in CSS

In this video tutorial, I am going to tell you how you can write some text on the image by using HTML and CSS. Here I use the CSS position attribute. Other P...