CSS text-overflow issues on Android
A quick post that may save you tons of time if your working on a website or HTML5 app that supports Android devices. The Android browser and its webview control have an annoying little bug with the text-overflow property. Lets look at an example:
.ellipsistext {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Everything should work great right?! Well not exactly, we all know that Android’s browser, and especially the built in WebView have many quirks. If you happen to have the following CSS rule in your stylesheet:
* {
text-rendering: optimizeLegibility;
}
Android will render the ellipsis AND the text they should be covering up. Really annoying bug, with a really simple fix!
