CODEWITHSUNDEEP
htmlcss
Chiefir
Chiefir

Reputation: 2671

Break span into few lines

I have a problem with my li of Brands:

<li>
  <a href="#">
    <span style="">{{ brand.brand_name }}</span>
    <span class="pull-right product-amount">{{ brand.amount_of_products }}</span>
  </a>
</li>

enter image description here
Case 2: When width of brand_name span is almost equal the length of the whole <li> the product-amount span is breaked to new line, but at the end (6) and the next <li> is shown incorrectly - its product-amount span is shown in wrong place.
Case 1: If the span is too long to fit the whole <ol> with length 200px - everything works correctly.

Is there a way to break a long span into few lines of defined length authomatically?

Upvotes: 0

Views: 62

Answers (2)

Aryan Twanju
Aryan Twanju

Reputation: 2516

You can adjust the layout with position: relative and postion: absolute.

Try adding the CSS rules like below.

<li>
  <a href="#">
    <span class="brand-name">{{ brand.brand_name }}</span>
    <span class="pull-right product-amount">{{ brand.amount_of_products }</span>
  </a>
</li>

li {
  padding-right: 60px;
  position: relative;
}

.product-amount {
  position: absolute;
  right: 0;
  top: 0;
}

Upvotes: 1

mayersdesign
mayersdesign

Reputation: 5310

That looks very much like tabular data, and therefore I would recommend that you use a table to display it. That would solve the crux of your problem "automatically" as well as displaying the data in the most efficient and suitable manner.

Upvotes: 0

Related Questions