<div class="container">
    <div class="buttons">
    <button class="button" onclick="functionNowrap()">nowrap</button>
    <button class="button" onclick="functionPre()">pre</button>
    <button class="button" onclick="functionPreLine()">pre-line</button>
    <button class="button" onclick="functionPreWrap()">pre-wrap</button>
    <button class="button" onclick="functionNormal()">normal</button>
  </div>
<div id="text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a tincidunt purus. Integer blandit molestie quam, ut euismod augue semper eu. Nam scelerisque sagittis eros eget bibendum.                  Fusce ultrices gravida odio sed aliquet. Curabitur imperdiet molestie sapien ac malesuada. Vestibulum vel molestie urna. Aliquam elementum varius sodales. Phasellus vel erat nec eros elementum ornare. Pellentesque augue augue, imperdiet eu bibendum consequat, lobortis quis lectus. Vivamus sodales tortor et ipsum aliquam feugiat. Praesent aliquet mi nisl, eget tempus mauris pharetra ut. Aliquam ac magna volutpat, ornare urna ultrices, vulputate est. Morbi quam ante, dignissim eget risus sit amet, facilisis luctus mi. Donec mattis tellus lorem, vel faucibus lorem venenatis ut. 
</div>
</div>
.container {
  position: relative;
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
}
#text {
  width: 50%;
}

.buttons {
  margin-left:-10px;
  top:0;
  position: relative;
}

button {
  background-color: #333;
  color: white;
  border: none;
  display: block;
  padding:5px;
  width: 100px;
  margin:5px;
  transition: .2s;
  font-weight: bold;
}

button:hover {
  background-color: white;
  color: #333;
}
function functionNowrap() {
  document.getElementById("text").style.whiteSpace="nowrap" 
}
function functionPre() {
  document.getElementById("text").style.whiteSpace="pre" 
}
function functionPreLine() {
  document.getElementById("text").style.whiteSpace="pre-line" 
}
function functionPreWrap() {
  document.getElementById("text").style.whiteSpace="pre-wrap" 
}
function functionNormal() {
  document.getElementById("text").style.whiteSpace="normal" 
}

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.