text-overflow

by kmouse

HTML

<div class="group">
	<div>Is that guacamole, chef?</div>
	<div class="ellipsis">Is that guacamole, chef?</div>
	<div class="hide-overflow">Is that guacamole, chef?</div>
	<div class="hide-overflow ellipsis">Is that guacamole, chef?</div>
	<div class="hide-overflow ellipsis">
		NESTED
		<p>PARAGRAPH</p>
		WON'T ELLIPSE.
	</div>
</div>

<hr/>
Atomic inline-level elements:
<div class="group nowrap">
	<div>AB<span class="red"></span><span class="orange"></span><span class="red"></span><span class="orange"></span>, CDE</div>
	<div class="ellipsis">AB<span class="red"></span><span class="orange"></span><span class="red"></span><span class="orange"></span>, CDE</div>
	<div class="hide-overflow">AB<span class="red"></span><span class="orange"></span><span class="red"></span><span class="orange"></span>, CDE</div>
	<div class="hide-overflow ellipsis">AB<span class="red"></span><span class="orange"></span><span class="red"></span><span class="orange"></span>, CDE</div>
	<div class="hide-overflow ellipsis">
		AB<span class="red"></span><span class="orange"></span><span class="red"></span><span class="orange"></span>, CDE
		<p>CD<span class="red"></span><span class="orange"></span><span class="red"></span><span class="orange"></span>, CDE</p>
		EF<span class="red"></span><span class="orange"></span><span class="red"></span><span class="orange"></span>, CDE
	</div>
</div>

<hr/>
Wide atomic inline-level elements:
<div class="group nowrap">
	<div class="hide-overflow ellipsis"><span class="red wide1"></span><span class="orange"></span></div>
	<div class="hide-overflow ellipsis"><span class="red wide2"></span><span class="orange"></span></div>
	<div class="hide-overflow ellipsis"><span class="red wide3"></span><span class="orange"></span></div>
	<div class="hide-overflow ellipsis"><span class="red wide4"></span><span class="orange"></span></div>
	<div class="hide-overflow ellipsis"><span class="red wide5"></span><span...

CSS

body {
  line-height: 1.1;
}
.group > div {
  line-height: 1.1;
  width: 3.1em;
  padding: 0.2em;
  border:  1px solid #000;
  margin: 0.5em 0;
}
.group p { margin: 0.5em 0.3em;}
.ellipsis {
  text-overflow: ellipsis;
}
.hide-overflow {
  overflow: hidden;
}
.scroll-overflow.scroll-overflow {
  overflow: auto;
  width: 300px;
  height: 3em;
}
.nowrap {
  white-space: nowrap;
}
.break-word {
  word-break: break-word;
}
.break-all {
  word-break: break-all;
}
.red, .orange {
  display: inline-block;
  width: 10px;
  height: 10px;
}
.red {
  background: red;
}
.orange {
  background: orange;
}
.wide1 { width: 20px; }
.wide2 { width: 30px; }
.wide3 { width: 40px; }
.wide4 { width: 50px; }
.wide5 { width: 60px; }
div.narrow1 { width: 30px; }
div.narrow2 { width: 25px; }
div.narrow3 { width: 20px; }
div.narrow4 { width: 15px; }
div.narrow5 { width: 10px; }
div.narrow6 { width: 5px; }
div.narrow7 { width: 3px; }
div.narrow8 { width: 1px; }
div.narrow9 { width: 0px; }