Trying to make a scrollbox that trunicates sub elements vertically-CodePudding

So basically I'm trying to have a fixed box that is always the same size on screen but if something is wider than the box it would get trunicated to the next line. But instead it keeps making the box start scrolling horizontally which I absolutly do NOT want to ever happen.

Inside the scrollbox could be

or tags and I want it to only scroll vertically and I want anything that goes off the right side to get moved to the next line for any sub element.

But right now it just scrolls horizontally and vertically.

the ${html} being any given string of html to be put in

<div class="col-md-10">
    <div class="Holder">
        <pre>
            ${html}
        </pre>
    </div>
</div>

p{
    overflow-wrap:normal;
}
pre{
    overflow-x: auto;
    border:0;
    background-color:transparent;
}
.Holder{
    display: flex;
    flex-direction: column;
    height: calc(100vh - 140px);
}

Any way to get this thing to do as I intend it to?

Note: I'm currently using v3.4.1 of bootstrap.min.css with the above CSS being loaded after.

CodePudding user response：

I want it to only scroll vertically and I want anything that goes off the right side to get moved to the next line for any sub element.

If I understand this correctly, which means you want to wrap the elements into next line, you can do that with white-space

Try this

p{
    overflow-wrap:normal;
}
pre{
    overflow-x: auto;
    border:0;
    white-space: inherit;
    background-color:transparent;
}
.Holder{
    display: flex;
    flex-direction: column;
    height: calc(100vh - 140px);
}

.Holder {max-width: 500px; max-height: 150px; overflow-y: auto;}

<div class="col-md-10">
    <div class="Holder">
        <pre>
            It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
        </pre>
    </div>
</div>

NOTE Here I have set max-height and max-width for the .holder just for you to see the vertical scrolling, you can remove that later.

CodePudding user response：

Try white-space property to pre tag.

pre {
  overflow-x: auto;
  border: 0;
  background-color: transparent;
  height: 100%;
  white-space: break-spaces;
}

.Holder {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: calc(100vh - 140px);
}

<div class="wrapper">
  <div class="Holder">
    <pre>
            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.
    </pre>
  </div>
</div>

Check demo here →→ https://jsfiddle.net/Divya_Patel/hL5we9cm/4/