Quadratisch, praktisch, gut

dabblet.css

/**
 * Quadratisch, praktisch, gut
 */

div
{
	position: relative;
	display: inline-block;
	margin: 1em;
	width: 30%;
	vertical-align: top;
	font: 24px Georgia, serif;
}

div::before
{
	content: "";
	position: absolute;
	width: 100%;
	height: 0;
	padding-top: 100%;
	background: #ace;
	z-index: -1;
}

dabblet.html

<div>Der Inhalt soll in einem Quadrat stehen.</div>
<div>
	Was aber, wenn es viel Inhalt ist? Soll dann abgeschnitten werden?
	Was aber, wenn es viel Inhalt ist? Soll dann abgeschnitten werden?
	Was aber, wenn es viel Inhalt ist? Soll dann abgeschnitten werden?
	Was aber, wenn es viel Inhalt ist? Soll dann abgeschnitten werden?
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}