space and word

by huahua

HTML

<p id="para">
  many      space br
  br 
  br 
  qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqssssssssqqqqq
  In the CSS Grid Layout Specification, a grid is defined as the following - The grid is an intersecting set of horizontal and vertical grid lines that divides the grid container’s space into grid areas, into which grid items
</p>
<div>
<label for="ws">white-space:</label>
<select name="ws" id="ws">
  <option value="normal">normal</option>
  <option value="nowrap">nowrap</option>
  <option value="pre">pre</option>
  <option value="pre-wrap">pre-wrap</option>
  <option value="pre-line">pre-line</option>
</select>
</div>
<div>
<label for="ws">word-wrap:</label>
<select name="ww" id="ww">
  <option value="normal">normal</option>
  <option value="break-word">break-word</option>
</select>
</div>

CSS

p {
  white-space: normal;
}

JavaScript

var para = document.getElementById("para");
var ws = document.getElementById("ws");
ws.onchange = space;
ww.onchange = word;
function space(){
	para.style.whiteSpace = this.value;
}
function word(){
	para.style.wordWrap = this.value;
}