<style>
.inlineRoot {
	border: 1px solid green;
	width: 400px;
	height: 20px;
	overflow: hidden;
	font-size: 12px;
}

.breakStart {
    margin-left: 10px;
}

.breakEnd {
    margin-right: 10px;
}

.breakBoth {
    margin: 10px;
}
</style>

<div class=inlineRoot>1<span class=breakBoth>2</span>3</div>
<div class=inlineRoot>1<span class=breakStart>2</span>3</div>
<div class=inlineRoot>1<span class=breakEnd>2</span>3</div>
<div class=inlineRoot><span class=breakStart>1</span><span class=breakBoth>2</span><span class=breakEnd>3</span></div>
<div class=inlineRoot><span class=breakStart><span class=breakEnd><span class=breakBoth>1</span></span></span></div>
<div class=inlineRoot><span class=breakEnd><span class=breakStart><span class=breakBoth>1</span></span></span></div>
<div class=inlineRoot><span class=breakStart>1</span><span class=breakStart>2</span><span class=breakStart>3</span></div>
<div class=inlineRoot><span class=breakEnd>1</span><span class=breakEnd>2</span><span class=breakEnd>3</span></div>
<div class=inlineRoot><span class=breakBoth>1</span><span class=breakBoth>2</span><span class=breakBoth>3</span></div>
<div class=inlineRoot><span class=breakStart><span class=breakStart><span class=breakStart>1</span>2</span>3</span></div>
<div class=inlineRoot><span class=breakEnd><span class=breakEnd><span class=breakEnd>1</span>2</span>3</span></div>
<div class=inlineRoot><span class=breakBoth><span class=breakBoth><span class=breakBoth>1</span>2</span>3</span></div>
<div class=inlineRoot>1<span class=breakStart>2<span class=breakStart><span class=breakStart>3</span>4</span>5</span>6</div>
<div class=inlineRoot>1<span class=breakEnd>2<span class=breakEnd><span class=breakEnd>3</span>4</span>5</span>6</div>
<div class=inlineRoot>1<span class=breakBoth>2<span class=breakBoth><span class=breakBoth>3</span>4</span>5</span>6</div>
<div class=inlineRoot>1<span class=breakStart>2<span class=breakBoth><span class=breakEnd>3</span>4</span>5</span>6</div>
<div class=inlineRoot>1<span class=breakEnd>2<span class=breakBoth><span class=breakStart>3</span>4</span>5</span>6</div>
<div class=inlineRoot>1<span class=breakBoth>2<span class=breakEnd><span class=breakStart>3</span>4</span>5</span>6</div>