Android 2.3 browser ignoring li width in combination with CSS ellipsis
I'm working on a responsive website and as I am testing it on various devices (mostly using browserstack) I'm running into an issue that seems specific to the Android 2.3 browser.
Please find below the correct rendering of what I am trying to accomplish. This is how it works and looks on almost any browser tested. What we're looking at is a list of photos, each having a caption. The caption is entered by users and can be of any length. The caption in the top left photo is very lengthy, yet as you can see it is cut off correctly, for this I am using the text-overflow:ellipsis CSS property.
This is how the same page looks on the Android browser (2.3, using browserstack to simulate a Galaxy Note):
As you can see, the top left photo takes up more than the 50% that I have set it to, and as a result the view extends the browser window. It definitely has to do with the long caption, because if I shorten it, the view does fit in nicely.
Strangely, we do see the ellipsis effect taking place, it's just that it it somehow uses more width than I specify.
The HTML structure is as follow (pseudo code):
<ul> <li> <figure> <a href=""><img></a> <figcaption><a href="">caption here</a></figcaption> </figure> </li> </ul>
The li element has a width of 50% applied in CSS. The ellipsis properties are set on figcaption a. As explained, the Android 2.3 browser does seem to apply the ellipsis, yet it goes beyond the 50% width that I specified. I have tried all kinds of overflow properties at all levels of the html structure, all to no avail.
As I am using this technique in various places, I'm quite eager to solve it.
Note: I'm using border-box throughout the design, although I don't think that is the issue.