I have a HTML code where when the text is too long, it should move the next line. But now, it is getting extended with horizontal scroll bar. Can we avoid this scroll bar and make sure it enters the next line

.block {
  display: flex;
  overflow-wrap: break-word;
}

<div class="block">dfsdssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Use word-break: break-all BUT be careful, this will break wherever it needs to, doesnt take words or something in account.

See https://developer.mozilla.org/de/docs/Web/CSS/word-break

.block {
  display: flex;
  word-break: break-all;
}

<div class="block">dfsdssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Expanding on Fabian's answer, you can also use word-break: normal; overflow-wrap: break-word; if your text consists of multiple words, it would break the words only if it's necessary

.block {
  width: 50px;
  word-break: normal;
  overflow-wrap: break-word;
}

<div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec sapien nisl. Aenean nisl elit, vehicula sed erat ac, vestibulum.</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>