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

Display the closest locations on the Google Maps interface

Keep scrolling! There's no need to worry about reaching the end of the page and having to start over

Optimized layout for screen resolutions exceeding 1000 pixels wide

Is there a way to utilize JavaScript or jQuery to modify the background color of the `Save` and `Cancel` buttons within a SharePoint 2013 edit form?

React-Troubleshooting list items and keys: A comprehensive guide to resolving common issues

Dynamic parallax or stacked vertical text animation

Command handler that dynamically utilizes both shared and separate commands

Unexplained Reference Error in Next.js Typescript: Variable Accessed before Initialization

The font rendering in Safari appears to have distinct differences compared to other web browsers

how to set up automatic login for a user after changing their password using passport-local-mongoose

What is the reason for the undefined output of this verified JSON Web Token (JWT)?

I am having trouble displaying images with Material UI CardMedia

Problem with AWS Lambda function handler failing to insert data into Athena

Navigating the world of gtag and google_tag_manager: untangling

Is it possible to utilize the same Context in multiple forms within React?

Discovering visible ID numbers on the screen

Angular JS allows you to easily remove the # symbol from a URL, improving the

When working with Vuejs, if you try to use "axios" in a .js file, you may encounter an error

Transferring JavaScript to PHP

Saving fonts when deploying on Vercel with Next.js is not supported