How to Break Lines in Lists with HTML and CSS-CodePudding

Gentlemen, I have a list that I created with html but I can't get the sentences inside the < li > tags to break and go down a line, without having to use < br> for that. How could I break lines for lists?

Here is the HTML code below:

<div >
             <h1>FREQUENTLY ASKED QUESTIONS</h1>


             <li>Learn to plan and set your goals so you get more done in less time.</li>
             <li>Discover the #1 way to create to-do lists to dramatically improve your daily performance and productivity.</li>

I tried using the < br > tag to line jump so that the text would go one line below, but I expected to automatically break lines in all my < li > tags

CodePudding user response：

You can put a space between each bulletpoint with something like

ul li {
  margin-bottom: 1em;
}

But you're also missing the <ul> wrap around the list items:

<ul>
   <li>Learn to plan and set your goals so you get more done in less time.</li>
   <li>Discover the #1 way to create to-do lists to dramatically improve your daily performance and productivity.</li>
</ul>

CodePudding user response：

You can also use word wrap

 <!DOCTYPE html>
<html>
   <head>
      <style>
         div {
         width: 250px; 
         border: 1px solid #000000;
         }
         div.a {
         word-wrap: normal;
         }
      </style>
   </head>
   <body>
      <div >
         <h1>FREQUENTLY ASKED QUESTIONS</h1>
         <li>Learn to plan and set your goals so you get more done in less time.</li>
         <li>Discover the #1 way to create to-do lists to dramatically improve your daily performance and productivity.</li>
      </div>
   </body>
</html>

It will look like this