Paragraph Separated by Bullets Without Bullets At End of Line

Question

Paragraph Separated by Bullets Without Bullets At End of Line

I need assistance in creating a unique type of list that I call a "bullet separated paragraph list" by using a javascript array of strings. For example:

item • item • item • item • item
item • item • item • item
item • item • item • item • item

While I can iterate through the items and add bullet points, I want to ensure that they do not appear at the end of a line, especially when the page is resized. Do I need to constantly re-render the element every time the page size changes, or is there a more efficient method?

javascript html css

Answer 1

Answer №1

To create a horizontal list with flexbox, set your unordered list to display as flex and align the items to start from the left. This will make the items appear inline one after the other. By adding flex-wrap, you can ensure that items wrap to the next line if there isn't enough space. Removing left padding from the list will hide the bullets on the leftmost items, and adjusting the right margin of each list item allows you to control the spacing between the items.

.wrap {
  overflow-x: hidden;
}

ul {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-left: 0px;
}

li {
  margin-right: 40px;
}

<div class="wrap">
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    ... (repeated for brevity)
    <li>Item</li>
  </ul>
</div>

Answer 2

To create a horizontal list with flexbox, set your unordered list to display as flex and align the items to start from the left. This will make the items appear inline one after the other. By adding flex-wrap, you can ensure that items wrap to the next line if there isn't enough space. Removing left padding from the list will hide the bullets on the leftmost items, and adjusting the right margin of each list item allows you to control the spacing between the items.

.wrap {
  overflow-x: hidden;
}

ul {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-left: 0px;
}

li {
  margin-right: 40px;
}

<div class="wrap">
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    ... (repeated for brevity)
    <li>Item</li>
  </ul>
</div>

Paragraph Separated by Bullets Without Bullets At End of Line

Answer №1

Similar questions

Images that dynamically adjust to different screen sizes with captions that are perfectly

Set a default selection for radio buttons in Angular template-driven forms

Dealing with validations in a personalized aid

Guide to developing a custom plugin for Nuxt.js

Looping through a PHP foreach function, assigning a distinct identifier for the select element using getElementById

The inner HTML functionality in Angular 2 seems to be malfunctioning when dealing with HTML tags

Update the content in the Bootstrap modal

Interactive image map with hover effects and external image swapping placed beyond the container

Problem with repetitive looping of Jquery click event within an Angular controller

The scrollbar will be visible only when the mouse hovers over the table

Guidance on calling a JavaScript function from a dynamically added control

The collision function is currently not functioning properly, causing a hindrance in movement. There are no other codes restricting movement

Adjust scale sizes of various layers using a script

What is the reason for needing a page reload in Javascript or JQuery?

How to sanitize data by removing HTML tags in a MySQL query before inserting or selecting from a database table

How can I ensure my AngularJS Controller variable is accessible across all page contexts?

Stop mega menu items from disappearing when hovered over

Modifying the verbiage in the menu based on location

Keeping calculated values in the React state can cause issues

When a Grid Item is enclosed in a link, it does not extend over rows