sangress/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<p class="whiteonblack">Lorem ipsum <span>dolor</span> sit amet, consectetur adipisicing elit. Blanditiis voluptate modi magni, quas pariatur iste possimus illo officia doloribus earum delectus necessitatibus voluptas consequatur accusantium obcaecati, accusamus labore tempore atque.</p>

<p class="long-word">this paragraph has a very long worddddddddddddddddddddddddddddddddddddddddd</p>

<p class="long-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem possimus, iste debitis sit iusto amet nulla dolor, eos blanditiis similique animi, quod facere a error quam. Debitis eligendi excepturi asperiores!</p>
</body>
</html>

## main.css
p.whiteonblack {
  padding: 4px;
  color: #fff;
  text-shadow: 2px 2px 8px #000;
  border: 1px dashed green;
}

p.whiteonblack span {
  transition: 1.5s;
  cursor: none;
}

p.whiteonblack span:hover {
  color: #000;
  text-shadow: 2px 2px 8px gold;
}

/*word-wrap*/
p.long-word {
  padding: 4px;
  border: 1px dashed green;
  width: 100px;
  word-wrap: break-word;
}

/*text-overflow*/
p.long-text {
  padding: 4px;
  border: 1px dashed green;
  width: 200px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>
	<p class="whiteonblack">Lorem ipsum <span>dolor</span> sit amet, consectetur adipisicing elit. Blanditiis voluptate modi magni, quas pariatur iste possimus illo officia doloribus earum delectus necessitatibus voluptas consequatur accusantium obcaecati, accusamus labore tempore atque.</p>

	<p class="long-word">this paragraph has a very long worddddddddddddddddddddddddddddddddddddddddd</p>

	<p class="long-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem possimus, iste debitis sit iusto amet nulla dolor, eos blanditiis similique animi, quod facere a error quam. Debitis eligendi excepturi asperiores!</p>
	</body>
	</html>
	p.whiteonblack {
	padding: 4px;
	color: #fff;
	text-shadow: 2px 2px 8px #000;
	border: 1px dashed green;
	}

	p.whiteonblack span {
	transition: 1.5s;
	cursor: none;
	}

	p.whiteonblack span:hover {
	color: #000;
	text-shadow: 2px 2px 8px gold;
	}

	/word-wrap/
	p.long-word {
	padding: 4px;
	border: 1px dashed green;
	width: 100px;
	word-wrap: break-word;
	}

	/text-overflow/
	p.long-text {
	padding: 4px;
	border: 1px dashed green;
	width: 200px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	}