diff --git a/tests/visual/dialog/complex-dialogs.html b/tests/visual/dialog/complex-dialogs.html
index 5cd9271aef..9cc2d1416c 100644
--- a/tests/visual/dialog/complex-dialogs.html
+++ b/tests/visual/dialog/complex-dialogs.html
@@ -20,6 +20,11 @@
 	<script src="../../../ui/jquery.ui.autocomplete.js"></script>
 	<script src="../../../ui/jquery.ui.tooltip.js"></script>
 
+	<style>
+	body {
+		font-size: 62.5%;
+	}
+	</style>
 	<script>
 	$(function() {
 		var dialog = $( "#dialog" ).dialog({
@@ -98,7 +103,7 @@
 
 <button id="open-dialog">Reopen dialog</button>
 
-<div id="dialog" title="Basic dialog">
+<div id="dialog" title="Basic dialog, but with a really long title that doesn't quite fit.">
 	<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
 	<p><button id="open-datepicker">Open another window with a datepicker.</button></p>
 	<p><button id="destroy-dialog">Self destruct</button></p>
diff --git a/themes/base/jquery.ui.dialog.css b/themes/base/jquery.ui.dialog.css
index 986ce8604d..370c95da56 100644
--- a/themes/base/jquery.ui.dialog.css
+++ b/themes/base/jquery.ui.dialog.css
@@ -24,6 +24,10 @@
 .ui-dialog .ui-dialog-title {
 	float: left;
 	margin: .1em 16px .1em 0;
+	white-space: nowrap;
+	width: 90%;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 .ui-dialog .ui-dialog-titlebar-close {
 	position: absolute;