Skip to content

Instantly share code, notes, and snippets.

@rampion

rampion/hide-overflow.html

Created March 12, 2012 20:41
Show Gist options
  • Save rampion/2024561 to your computer and use it in GitHub Desktop.
Save rampion/2024561 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
hide-overflow.html
<html>
<head>
<style>
.container > div {
color: transparent; /* don't show the text-overflow content */
overflow: hidden;
height: 1em;
width: 100%;
}
.container {
margin-left: -2px;
margin-right: -2px;
}
/* use the actual text to get the measurement right for hiding */
#first > div { text-overflow: "first_text_section"; }
#first > div > span:before { content: "first_text_section" }
#second > div { text-overflow: "second_text_section"; }
#second > div > span:before { content: "second_text_section" }
#third > div { text-overflow: "third_text_section"; }
#third > div > span:before { content: "third_text_section" }
.container > div > span {
color: black; /* do show the span when possible */
height: 1em;
width: 100%;
}
#first > div > span { background: #ffa }
#second > div > span { background: #aaf }
#third > div > span { background: #faa }
#first { width: 50px }
#second { width: 100px }
#third { width: 200px }
.container { display: inline-block; }
</style>
</head>
<body>
<div id="first" class="container">
<div><span></span></div>
</div>
<div id="second" class="container">
<div><span></span></div>
</div>
<div id="third" class="container">
<div><span></span></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment