Template:Ditto/styles.css

.__ditto {
	display:inline-block;
	position:relative;
	/* According to the CSS spec, text-indent is inherited by default, and therefore on display:inline-block elements, it is "wise" to reset it to 0. */
	text-indent:0;
}

.__ditto_hidden {
	visibility:hidden;
	color:transparent; /* in case visibility doesn't work on a device, at least hide the text */
	white-space:nowrap; /* if the hidden text wraps the ditto will be in the wrong place. Probably the best you can do is use the whole line */
}

.__ditto_text {
	display:inline-block;
	position:absolute;
	left:0;
	width:100%;
	white-space:nowrap;
}

.__ditto_text_align_left {
	text-align:left;
}
.__ditto_text_align_right {
	text-align:right;
}
.__ditto_text_align_justify {
	text-align:justify;
	text-align-last:justify;
}
.__ditto_text_align_center {
	text-align:center;
}
.__ditto_text_overflow_hidden {
	overflow:hidden;
}
.__ditto_text_overflow_visible {
	overflow:visible;
}