Skip to content

Instantly share code, notes, and snippets.

@maxhoffmann

maxhoffmann/dabblet.css

Created April 30, 2013 12:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save maxhoffmann/5488313 to your computer and use it in GitHub Desktop.
Save maxhoffmann/5488313 to your computer and use it in GitHub Desktop.
Download ZIP
The first commented line is your dabblet’s title
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
*/
.overflow {
max-width: 100%;
overflow: hidden;
white-space: nowrap;
}
.inline-block {
display: inline-block;
}
.inline-block-fixed {
display: inline-block;
vertical-align: top;
}
/* resets */
.container {
float: left;
margin-left: 20px;
width: 200px;
border: 2px solid red
}
h3 { text-align: center; }
p { margin: 0 }
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<h1>fixing inline-block + overflow: hidden in Firefox + Opera</h1>
<div class="container">
<h3>without v-align: top</h3>
<p class="overflow inline-block">lorem ipsum dolor lorem ipsum dolor</p>
<p>next paragraph</a>
</div>
<div class="container">
<h3>with vertical-align: top</h3>
<p class="overflow inline-block-fixed">lorem ipsum dolor lorem ipsum dolor</p>
<p>next paragraph</a>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment