technology

DataTables, Bootstrap and Text Overflow

Modern browsers do a good job of wrapping table text so that everything fits. But sometimes the table text just doesn’t cooperate. For example, this combination of a long email address, Surname and Given Name. The browser doesn’t know where to split the cell entry without some whitespace.

Long entry text without whitespace

We can solve this by using CSS to truncate the text with an ellipsis …

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html
index fe25daa..149eb9f 100644
--- a/src/main/webapp/index.html
+++ b/src/main/webapp/index.html
@@ -10,6 +10,14 @@
     <!-- Optional theme -->
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
 
+    <style media="screen" type="text/css">
+     td {
+       max-width: 120px;
+       white-space: nowrap;
+       text-overflow: ellipsis;
+     }
+    </style>
+
     <!-- Latest compiled and minified JavaScript -->
     <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
     <script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>

Now the email address is truncated and the table is back to the desired width.

With text-overflow: ellipsis

After editing the Given Name, we see that text will still wrap on whitespace.

With wrap on whitespace

BTW, I must confess that I set the max-width value by trial and error. It might need to be set with a media query to play well with Bootstrap.

The full source for this version of Jersey, Gson and Datatables is on github.

12 Jul: DataTables edit Locally
25 Oct: Autostart Jetty in Maven