li text inside div container leave container border

Question

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>

What do you want to happen with the extra text? It can be truncated (you just don't see the extra text) with or without ellipses (`...`), or it can be forced to wrap (possibly at awkward places in real text). — Heretic Monkey, Aug 11 '22 at 22:07
User inset the text in input field and then this text appears as separate div with border. My goal is - no matter how long text user insert, div is adjusted in hight but text itself does not leave border which is set in .to-do-list-wrapper and neither go under or above the button. — Ilze, Aug 11 '22 at 22:11
The code you've presented doesn't give the same results as in your screenshot. https://jsfiddle.net/wv0ar84n/. Answers here may be unusable as a result. You may want to go back and construct an [mcve] that more closely resembles the issue you're having — Daniel Beck, Aug 11 '22 at 22:11

score -2 · Answer 1 · answered Aug 11 '22 at 22:07

-2

Try adding in your .done class the

overflow-wrap: break-word;

answered Aug 11 '22 at 22:07

Akis

1,806
2
10
12

mikyll98 · Accepted Answer · 2022-08-11T22:16:28.630

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>

li text inside div container leave container border

2 Answers2