li text inside div container leave container border

August 12, 2022

I’m learning CSS and my content placement does not reach desired result. As see in picture, inserted text leaves border if it’s too long. My idea is to keep it within div border as well as place the button at the far right side on the div container after the text.

.result {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.todo-list-wrapper {
  display: inline-block;
  border: solid 1px #3772ff;
  padding: 0.5rem;
  border-radius: 0.5rem;
}

li {
  list-style: none;
  font-family: $font;
  letter-spacing: 0.8px;
  color: #080708;
  justify-content: center;
  text-align: center;
}

.done {
  justify-items: center;
  align-content: center;
  left: 26rem;
  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
  background: #fdca40;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
}

<div class="result">
  <div class="todo-list-wrapper">
    <ul>
      <li>{{ todo }}<button class="done">done</button></li>
    </ul>
  </div>
</div>

>Solution :

You could use word-wrap and overflow-wrap CSS fields

li {
  list-style: none;
  font-family: $font;
  letter-spacing: 0.8px;
  color: #080708;
  justify-content: center;
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

word-wrap property allows long words to be able to be broken and wrap onto the next line

overflow-wrap specifies whether or not the browser can break lines with long words, if they overflow the container.

Result:

<style>.result {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    
    .todo-list-wrapper {
      display: inline-block;
      border: solid 1px #3772ff;
      padding: 0.5rem;
      border-radius: 0.5rem;
    }
    
    li {
      list-style: none;
      font-family: $font;
      letter-spacing: 0.8px;
      color: #080708;
      justify-content: center;
      text-align: center;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
    
    .done {
      justify-items: center;
      align-content: center;
      left: 26rem;
      padding: 0.25rem 0.5rem 0.25rem 0.5rem;
      background: #fdca40;
      border: none;
      border-radius: 0.5rem;
      cursor: pointer;
    }
    </style>

    <div class="result">
      <div class="todo-list-wrapper">
        <ul>
          <li>Lorem ipsum, 
      or lipsum as it is sometimes known, is dummy text used in laying out print,
      graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century
      who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for 
      use in a type specimen book.<button class="done">done</button></li>
        </ul>
      </div>
    </div>