taly2808/jsbin.eXutuyA.css

## jsbin.eXutuyA.css
div.example {
  display: block;
  padding: 10px 20px;
  color: black;
  background: rgba(255, 255, 255, 0.4);
  -webkit-border-radius: 8px;
  -khtml-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  margin-bottom: 10px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
#overflow-hidden {
  font-size: 20px;
  height: 1.1em;
  overflow: hidden;
}
#no-wrap {
  font-size: 20px;
  height: 1.1em;
  white-space: nowrap;
  overflow: hidden;
}
#ellipsis {
  font-size: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 1.1em;
  overflow: hidden;
}

## jsbin.eXutuyA.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Text Wrapping CSS3</title>
</head>
<body>
  <div id="wrapping" style="width:85%;">
    <div id="overflow-hidden" class="example">
      A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.
    </div>
    <div id="no-wrap" class="example">
      A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.
    </div>
    <div id="ellipsis" class="example">
      A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.
    </div>
  </div>
  <input type="range" min="0" max="100" value="95" onchange="changeWrapping(event)">
</body>
</html>

## jsbin.eXutuyA.js
function changeWrapping(event) {
              document.getElementById('wrapping').style.width = event.target.value + '%';
}
	div.example {
	display: block;
	padding: 10px 20px;
	color: black;
	background: rgba(255, 255, 255, 0.4);
	-webkit-border-radius: 8px;
	-khtml-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	margin-bottom: 10px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	}
	#overflow-hidden {
	font-size: 20px;
	height: 1.1em;
	overflow: hidden;
	}
	#no-wrap {
	font-size: 20px;
	height: 1.1em;
	white-space: nowrap;
	overflow: hidden;
	}
	#ellipsis {
	font-size: 20px;
	text-overflow: ellipsis;
	white-space: nowrap;
	height: 1.1em;
	overflow: hidden;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>Text Wrapping CSS3</title>
	</head>
	<body>
	<div id="wrapping" style="width:85%;">
	<div id="overflow-hidden" class="example">
	A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.
	</div>
	<div id="no-wrap" class="example">
	A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.
	</div>
	<div id="ellipsis" class="example">
	A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.
	</div>
	</div>
	<input type="range" min="0" max="100" value="95" onchange="changeWrapping(event)">
	</body>
	</html>
	function changeWrapping(event) {
	document.getElementById('wrapping').style.width = event.target.value + '%';
	}