Consider the folowing markup

<div>
   <p> text here</p>
</div>

When length of text is small , there is no issue .
When length of text becomes little more , I am able to display the text outside the div with white-space: nowrap CSS property.
However when text becomes huge , some part of the text gets hidden as It moves outside the viewport .Is there a way in which I can display it on the second line when It overflows the whole viewport and not the size of the parent div element.

CodePudding user response：

If you put an inner div around the text within your div you can force that to have width 100vw and set its white-space back to normal.

In this snippet the 'original' (outer) div is given a pink background so you can see its boundaries.

div.outer {
  white-space: nowrap;
  width: 50%;
  background-color: pink;
}

div.inner {
  width: 100vw;
  white-space: normal;
}

<div class="outer">
  <div class="inner">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  </div>
</div>

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

The extra (inner) element is put there to deal with the general case. You might be able to use the p element instead of div.inner - it depends on whether there is other text e.g. outside an inner element in your particular set up.

CodePudding user response：

try overflow-wrap: break-word; Or word-break: break-all;