<div class="support-css-excludes"></div>

<div class="container">
	<h3><code>wrap-through: none</code></h3>
	<div class="wrap-flow-both wrap-through-none">
		<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, nostrum vel commodi voluptatem harum molestiae quasi atque incidunt. Debitis iste non maiores! Quis laboriosam maxime vitae molestias veritatis porro quam.</span>
		<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, nostrum vel commodi voluptatem harum molestiae quasi atque incidunt. Debitis iste non maiores! Quis laboriosam maxime vitae molestias veritatis porro quam.</span>
		<div class="img">
			<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/coffee-mug.png" alt="">
		</div>
		<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, nostrum vel commodi voluptatem harum molestiae quasi atque incidunt. Debitis iste non maiores! Quis laboriosam maxime vitae molestias veritatis porro quam.</span>
		<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, nostrum vel commodi voluptatem harum molestiae quasi atque incidunt. Debitis iste non maiores! Quis laboriosam maxime vitae molestias veritatis porro quam.</span>
		<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, nostrum vel commodi voluptatem harum molestiae quasi atque incidunt. Debitis iste non maiores! Quis laboriosam maxime vitae molestias veritatis porro quam.</span>
	</div>

	<h3><code>wrap-through: wrap</code></h3>
	<div class="wrap-flow-min wrap-through-wrap">
		<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, nostrum vel commodi voluptatem harum molestiae quasi atque incidunt. Debitis iste non maiores! Quis laboriosam maxime vitae molestias veritatis porro quam.</span>
		<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, nostrum vel commodi voluptatem harum molestiae quasi atque incidunt. Debitis iste non maiores! Quis laboriosam maxime vitae molestias veritatis porro quam.</span>
		<div class="img">
			<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/coffee-mug.png" alt="">
		</div>
		<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, nostrum vel commodi voluptatem harum molestiae quasi atque incidunt. Debitis iste non maiores! Quis laboriosam maxime vitae molestias veritatis porro quam.</span>
		<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, nostrum vel commodi voluptatem harum molestiae quasi atque incidunt. Debitis iste non maiores! Quis laboriosam maxime vitae molestias veritatis porro quam.</span>
		<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, nostrum vel commodi voluptatem harum molestiae quasi atque incidunt. Debitis iste non maiores! Quis laboriosam maxime vitae molestias veritatis porro quam.</span>
	</div>
</div>

// --------------------------------
// Global
// --------------------------------

.container {
	// -------demo only--------- //
	max-width: 800px;
	margin: auto;
	line-height: 1.5;
}

div[class*="wrap"] {
	// -------required--------- //
	position: relative;
}


// --------------------------------
// Demo Specific
// --------------------------------

.wrap-flow-both .avatar {
	-ms-wrap-flow: both;
}

.wrap-flow-min .avatar {
	-ms-wrap-flow: minimum;
}

.img {
	// ------- required
	position: absolute;
}

.img:nth-of-type(1) {
	top: 20%;
	left: calc(30% - 100px);
	opacity: 0.2;
}

.img:nth-of-type(2) {
	top: 20%;
	left: calc(30% - 50px);
	opacity: 0.6;
}

.wrap-through-none span:nth-of-type(4) {
	// ------- required
	display: block;
	-ms-wrap-through: none;
	// -------demo only
	background: red;
}

.wrap-through-wrap span:nth-of-type(4) {
	// ------- required
	display: block;
	-ms-wrap-through: wrap;
	// -------demo only
	background: red;
}